CODEWITHSUNDEEP
google-chrome-extension
ZenBalance
ZenBalance

Reputation: 10307

Chrome extension background page html not working

I am trying to understand chrome background pages. I managed to get background.js script running after cannibalizing on the of examples and it pops up with an alert box every time a user visits a page. However, when I take the same script and move it to a background.html file, I cannot seem to get the file to execute.

I have updated the the manifest file to a page (instead of script) and the extension loads fine. I have also tried playing around with either having the javascript in a script tag directly in the body or in a function as it is now that is called onload on the body or in the head.

Perhaps I don't understand the concept of what a background.html page is used for in a Chrome extension?

Manifest file:

{
  "name": "Testing Extension",
  "version": "0.2",
  "background": { "pages": ["background.html"] },
  "permissions": [
    "tabs", "https://mail.google.com/*", "http://*/*, https://*/*"
  ],
  "browser_action": {
    "name": "Do some action",
    "icons": ["icon.png"]
  },
  "manifest_version": 2,
  "web_accessible_resources": ["injectImage.js", "background.html"]
}

injectImage.js

alert('Got Here');
'use strict';   
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(null, {file: "injectImage.js"});
});

    chrome.browserAction.setBadgeBackgroundColor({color: [0, 200, 0, 100]});

    var i = 0;
    window.setInterval(function () {
        chrome.browserAction.setBadgeText({text: String(i)});
        i++;
    }, 10);

background.html

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-1.8.0.min.js"></script>
        <script src="injectImage.js"></script>
    </head>
    <body>
</body>
</html>

currently this code doesn't seem to do anything other than put an icon in the top right corner.

Upvotes: 10

Views: 30331

Answers (5)

Carson
Carson

Reputation: 7988

For version 3

background pages are replaced by service_workers in MV3

Replace background.page or background.scripts with background.service_worker in manifest.json.

{
  "manifest_version": 3,
  "name": "",
  "background": {
    "service_worker": "background.js"
  }
}

Upvotes: 1

Aniket Thakur
Aniket Thakur

Reputation: 68935

OR you can directly define js instead of defining a background page and referencing a script file in it (Inline scripts are not allowed as per Content Security Policy (CSP))

  "background": {
    "scripts": ["background.js"]
  },

Upvotes: 2

Jeremy Daniel Gregorio
Jeremy Daniel Gregorio

Reputation: 137

One more gotcha not mentioned here. Doing <script src="myscript"/> doesn't work :P, you have to type it out completely with <script src="myscript"></script>. Took me a bit to figure that out.

Upvotes: 0

Dylan Valade
Dylan Valade

Reputation: 5605

Your background is only one page and acts like a local server that can send and receive data between the content_scripts and default_popup or other extension pages.

For anyone starting out, look at each example's manifest version, which is defined in manifest.json. Version 2 has stricter security policies and inline javascript is invalid so copying sample v1 code and pasting it into background.html will not work anymore. All scripts need to be in an external file that can be included in an HTML file using the src attribute like <script src="main.js"></script>

My understanding is that you have four commonly used components for a basic extension:

  1. DOM of the tab being viewed which can only be accessed by content_scripts

  2. content_scripts is an array of javascript files identified in manifest.json that are sequentially injected directly into the tab's DOM. Apparently the JS variables and functions from the tab and your content_scripts cannot interact.

  3. One background HTML page which Chrome either generates by concatenating an array of scripts OR is defined as one page, commonly named background.html.

  4. {"browser_action" : {"default_popup" : "popup.html"}} is an optional user interface defined in manifest.json that is displayed when someone clicks your extension icon. The popup has no way to reach the tab's DOM so if the tab's content matters then it must be requested using Chrome messages like chrome.extension.sendMessage

Your background is defined either as one or more scripts: 

  "background": {
    "scripts": ["background.js"]
  },

Or as a page:

  "background": {
    "page": "background.html"
  },

If you want to find out what is happening inside of the background then you can use console.log but in order to inspect the output you have to launch the inspector from the Extensions page. You can even see that the background file is always named "_generated_background_page.html".

enter image description here

Upvotes: 25

suhibr
suhibr

Reputation: 46

You have a typo in your manifest file. Including a background page should look like this:

"background": {"page": "background.html"}

Upvotes: 2

Related Questions