如何在后台获取chrome扩展程序的内容脚本？

Question

This is my package.json, but my background.js is not running in the background. I've been trying different things for a while, and haven't been able to figure it out. Thanks in advance for your help,

{
  "manifest_version": 2,
  "name": "Focus",
  "version": "1.9.3",
  "description": "Block distracting websites and get inspired to focus on what's important",
  "background_page": "background.html",
  "icons": {
    "16": "inspirelogo16.png",
    "48": "inspirelogo48.png",
    "128": "inspirelogo128.png"
  },
  "browser_action": {
    "default_icon": "inspirelogo19.png",
    "default_title": "Inspire Router",
    "default_popup": "/pages/popup.html"
  },
  "permissions": [
    "background",
    "notifications",
    "tabs",
    "<all_urls>",
    "webRequest",
    "*://*.google.com/"
  ],
  "background": {
    "scripts": [
      "background.js"
    ],
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["background.js"]
      }
    ],
    "persistent": true
  },
  "options_page": "/pages/fieldpage.html",
  "content_security_policy": "script-src 'self' 'unsafe-eval' chrome-extension://bjmcjeffnloaojffcbaekmcokegnejlf/pages/inspire.html http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js https://ssl.google-analytics.com/ga.js http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js https://connect.facebook.net https://www.facebook.com https://chrome.google.com https://chrome.google.com; object-src 'self'"
}

Answer 1

you should put the content_script outside of the background, like

"background": {
  "scripts": [
    "background.js"
  ],
  "persistent": true
},
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["background.js"]
  }
],

And as mentioned by @minj you should remove the background_page attribute. (you either use it or the background one)

Also the background runs on its own page, not in the page you see in the browser. You can find it .

If you want to have a script accessible both in the bg and content script, like a utils.js file with shared functions, you can add it to the background.scripts and content_scripts.js arrays

You should think of the background page as an additional page (that you can access directly by going to chrome://extensions/ and clicking background page on your extension), separated from the tabs open in your browser. For instance you can't access the dom elements of the page you are viewing in the browser from the background page.

The bg page and it's variable don't refresh when you reload a normal page (in opposition to the bg page mentioned above) for instance. They're just two different tabs.

The content scripts however are simply scripts that get loaded in the pages that matches content_scripts.matches , as if they were loaded from the page themselves. They don't persist between pages, or share information.

You might want to both interact with the dom elements and have a persistent bg script. To do that, you use the message passing protocol that makes asynchronous between the content scripts and the bg page. I usually use the bg page as a persistent controller that gets info from the content scripts and send them orders.

Answer 2

Remove background_page because it overrides background . You can only use one or the other, not both.

Alternatively, add your scripts to background.html file via regular script tags:

<script type="application/x-javascript" src="/background.js"></script>