Chrome extension Javascript running only on icon click

Question

I want my Chrome Extension to load Javascript once user visits a website. But currently, the Javascript is executed only when user click the extension icon and till the extension popup is open.

I saw the answer in this Chrome extension to load the script without clicking on icon question.

My manifest.json is:

{
  "manifest_version": 2,

  "name": "Javascript example",
  "description": "Some description.",
  "version": "1.1",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["popup.js"]
    }
  ]
}

The popup.js is:

document.addEventListener('DOMContentLoaded', () => {

  alert("Working");
});

popup.html is:

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

The alert dialog is shown only when I click the extension icon (i.e. when popup.html is run), not when a page loads. I want the popup.js file to execute without user needing to click the extension icon. What am I missing?

Add `"run_at":"document_start"` in the `content_scripts` entry in the manifest. — Iván Nokonoko, Dec 28 '17 at 07:56

score 4 · Accepted Answer · answered Dec 28 '17 at 07:59

Your manifest works, but run_at defaults to document_idle which means that DOMContentLoaded has already fired. This can be fixed by specifying run_at to document_start instead.

{
  "manifest_version": 2,

  "name": "Javascript example",
  "description": "Some description.",
  "version": "1.1",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "permissions": [
    "activeTab",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "run_at": "document_start",
      "js": ["popup.js"]
    }
  ]
}

Source: https://developer.chrome.com/extensions/content_scripts

score 1 · Answer 2 · answered Dec 28 '17 at 07:27

You need the content script.

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

Here are some examples of what content scripts can do:

Find unlinked URLs in web pages and convert them into hyperlinks

Increase the font size to make text more legible

Find and process microformat data in the DOM

If your content script's code should always be injected, register it in the extension manifest using the content_scripts field, as in the following example.

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

Refer this link for more information & implementation.

But I already have content_scripts written in manifest.json. What am I doing wrong? — user5155835, Dec 28 '17 at 07:33

score 0 · Answer 3 · answered Dec 28 '17 at 07:23

0

You can use content script that runs in the context of the page and this way you'll know when the user visits a specific site: https://developer.chrome.com/extensions/content_scripts

answered Dec 28 '17 at 07:23

user1610008

1
1

Please can you elaborate with example – user5155835 Dec 28 '17 at 07:24
there's an example at the link provided in the answer? did you want your manifest rewritten for you? – Jaromanda X Dec 28 '17 at 07:26
I have written the mainfest.json with content scripts. I'm asking what's wrong in what I've written – user5155835 Dec 28 '17 at 07:55

Chrome extension Javascript running only on icon click

3 Answers3