Unable to access web page DOM from popup; console.logs do not display

Question

Creating a Chrome extension that clicks all the "connect" buttons on the page and then clicks "next". Below is my code. I am unable to find the problem. I have put in some console.log()s, but they don't appear to show up. Please ask any questions that might help debugging this problem.

html:

<!doctype html>
<html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
    <title>LinkedIn Connect</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>LinkedIn Connect</h1>
    <button id="connectMe">Connect me now!</button>
  </body>
</html>

mainfest.json:

{
  "manifest_version": 2,

  "name": "LinkedIn Connect",
  "description": "This extension help with LinkedIn connections",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab"
   ]
}

popup.js:

document.addEventListener('DOMContentLoaded', function () {
    console.log("1 clicked");
    var connectMeButton = document.getElementById('connectMe');
    connectMeButton.addEventListener('click', function () {
        // Every 1 second, click all the connect buttons on the result page 
        console.log("2 clicked");
        window.setInterval(function () {
            $("a:contains('Connect')").each(function (
                index, a) {
                $(this).trigger('click');
            });
            //Scroll down to the button of the page
            window.scrollTo(0, document.body.scrollHeight);
        }, 1000);
        //Click Next after every 5 seconds
        window.setInterval(function () {
            $("a:contains('Next >')")[0].click();
        }, 5000);
    }, false);
}, false);

that's the first one. Because nothing is working, this was the first step. — fidgetyphi, Dec 09 '16 at 06:37
What *exactly* is shown in the [various appropriate consoles for your extension](http://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? — Makyen, Dec 09 '16 at 12:02
I would suggest that you read the [Chrome extension architecture overview](https://developer.chrome.com/extensions/overview#arch) (and perhaps work through reading the pages linked from there). It has overall architecture information which should help your understanding of how things are generally organized/done. — Makyen, Dec 09 '16 at 12:29
I shall definitely do that. Ended up spending all night on phone reading shopify articles on medium -.- I'll let you know the console log first thing in the morning — fidgetyphi, Dec 09 '16 at 12:30

score 1 · Accepted Answer · edited May 23 '17 at 11:53

Content Security Policy

You should download the jQuery version you desire and include it with your extension. This is a security issue (e.g. possible man-in-the-middle attacks). There are multiple Questions/Answers which cover the Content Security Policy problems inherent in loading an external resource.

`console.log()` not showing up

Chrome extensions have multiple consoles which you need to be looking at depending on from where the console.log() is being run. This answer describes displaying four of the different consoles.

Interacting with web pages requires using a content script

You appear to want to be interacting with the currently displayed web page. You can not do that directly from your popup. You must use a content script. In this case, it looks like something you will want to inject using chrome.tabs.executeScript().

mainfest.json:

{
  "manifest_version": 2,

  "name": "LinkedIn Connect",
  "description": "This extension help with LinkedIn connections",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab"
   ]
}

popup.html:

<!doctype html>
<html>
  <head>
    <title>LinkedIn Connect</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>LinkedIn Connect</h1>
    <button id="connectMe">Connect me now!</button>
  </body>
</html>

popup.js:

document.addEventListener('DOMContentLoaded', function () {
    console.log("1 clicked");
    var connectMeButton = document.getElementById('connectMe');
    connectMeButton.addEventListener('click', function () {
        console.log("2 clicked");
        //Download jQuery and include it with your extension. Loading things from an 
        //  external resource is a security issue.
        chrome.tabs.executeScript({file:"jquery-3.1.1.min.js"});
        chrome.tabs.executeScript({file:"contentScript.js"});
    }, false);
}, false);

contentScript.js:

// Every 1 second, click all the connect buttons on the result page 
window.setInterval(function () {
    $("a:contains('Connect')").each(function (
        index, a) {
        $(this).trigger('click');
    });
    //Scroll down to the button of the page
    window.scrollTo(0, document.body.scrollHeight);
}, 1000);
//Click Next after every 5 seconds
window.setInterval(function () {
    $("a:contains('Next >')")[0].click();
}, 5000);

Additional comments

User experience:
From a user experience point of view, you have no way to stop your script other than reloading the web page. You should provide the user with a way to stop other than having to reload the page.

You have a popup where the current function is to only display a single button for the user to click. This forces the user to perform two clicks when there is only a need for one (clicking your browser_action button). When you have a way to turn off your script, you may want to consider making your browser_action button act like a on/off toggle (this answer has some generalized code which works in Chrome extensions and Firefox WebExtensions to provide states for your button: 2 states is a toggle).

Multiple intervals:
You have set up two separate interval timers. It would be much better to have only one interval timer. You can then execute the code you want done every five seconds only on each fifth iteration of the one that is executing every second. As it is right now, how many iterations of the one second timer occur between each execution of the five second timer is indeterminate (four or five).

Thanks for the great feedback and help. It worked perfectly. Also, I wanted to know about all the legal issues that I should look into before looking into publish this app. My motivation to publish isn't gain money but to gain experience and learn about the process. — fidgetyphi, Dec 10 '16 at 00:39

score 0 · Answer 2 · answered Dec 09 '16 at 07:02

0

By default, only local script and and object resources are allowed to be loaded for chrome extensions.

[Recommended] Try making a local copy of jQuery and refer to it

Or you could relax default restrictions by adding the following line in your manifest.json

"content_security_policy": "script-src 'self' https://code.jquery.com; object-src 'self'"

answered Dec 09 '16 at 07:02

Haibara Ai

10,703
2
31
47

Didn't work with either option. Also, still no console log. – fidgetyphi Dec 09 '16 at 09:20
@Programmerrrrr, make sure you're watching popup console. http://stackoverflow.com/documentation/google-chrome-extension/5938/developer-tool-integration/20830/debugging-the-popup-window#t=201612090922156598895 – Haibara Ai Dec 09 '16 at 09:22
Already in bed. Will check it first thing in the morning. Thanks for the prompt reply. – fidgetyphi Dec 09 '16 at 09:23
Also, I'm new to JavaScript programming. Any comments on how to improve this code and improve my programming skills on general? – fidgetyphi Dec 09 '16 at 09:24
@Programmerrrrr, I guess http://codereview.stackexchange.com/ may help. – Haibara Ai Dec 09 '16 at 09:28
quite inactive that forum is. http://codereview.stackexchange.com/q/149359/122261 – fidgetyphi Dec 09 '16 at 09:30
@HaibaraAi, If you believe jQuery not loading due to CSP to be the problem, rather than writing a new answer, it would be *much* better to vote to close the question as a duplicate of one of the many other questions which have this problem. [There are multiple other questions which would be good duplicate targets](http://stackoverflow.com/search?tab=votes&q=%5bgoogle-chrome-extension%5d%20Content%20Security%20Policy%20jQuery). – Makyen Dec 09 '16 at 12:26

Unable to access web page DOM from popup; console.logs do not display

2 Answers2

Content Security Policy

console.log() not showing up

Interacting with web pages requires using a content script

Additional comments

`console.log()` not showing up