Run Content Script From Toolbar

Question

I want to have a Chrome Extension that will replace text on a page. I've got all the code working on the Javascript side of things, and it runs perfectly when a page loads, the problem is I only want it to replace the text on the page when you click a button on the toolbar.

I setup a button on the toolbar but the replacement Javascript still just runs when the page loads, rather than when you click the button. Additionally at the moment when you click the toolbar button, despite it not doing anything, it still shows a flash of a popup window. All I want it to do is run the text replacement code when you click the toolbar button, without showing a popup.html box.

The code currently is as follows,

Manifest.json

{
  "name": "Browser Action",
  "version": "0.0.1",
    "manifest_version": 2,
  "description": "Show how options page works",
  // Needed to retrieve options from content script
  "background": "background.html",

  // This is how you load Browser Action. Nearly equal to Page one.
  "browser_action": {
      "default_icon": "icon.png",
      "popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js" : ["popup.js"]
    }
  ]
}

popup.js

function htmlreplace(a, b, element) {    
    if (!element) element = document.body;    
    var nodes = element.childNodes;
    for (var n=0; n<nodes.length; n++) {
        if (nodes[n].nodeType == Node.TEXT_NODE) {
            var r = new RegExp(a, 'gi');
            nodes[n].textContent = nodes[n].textContent.replace(r, b);
        } else {
            htmlreplace(a, b, nodes[n]);
        }
    }
}

htmlreplace('a', 'IT WORKS!!!');

popup.html - Blank

background.html

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "popup.js"});
});

Answer 1

There are a few changes you must make (most of them mentioned by rsanchez - but not all) and a couple more changes that could/should be made.

So, instead of listing things that could/should/must be changed, I will demonstrate a sample extension that does what you want.

---

First things first - More info on a few key concepts, related to your question/problem:

• Manifest File Format
• Permissions
• Background pages, Event pages
• Content scripts
• Browser actions

---

Extension directory structure:

          extension-root-directory/
           |_____manifest.json
           |_____background.js
           |_____content.js

manifest.json:

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",
    "offline_enabled": true,

    "background": {
        "persistent": false,
        "scripts": ["./bg/background.js"]
    },

    "browser_action": {
        "default_title": "Test Extension"
        //"default_icon": {
        //    "19": "img/icon19.png",
        //    "38": "img/icon38.png"
        //},
    },

    "permissions": [
        "activeTab"
    ]
}

background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, { file: "content.js" });
});

content.js:

function htmlReplace(a, b, element) {
    if (!element) {
        element = document.body;
    }

    var r = new RegExp(a, "gi");
    var nodes = element.childNodes;
    for (var n = 0; n < nodes.length; n++) {
        if (nodes[n].nodeType == Node.TEXT_NODE) {
            nodes[n].textContent = nodes[n].textContent.replace(r, b);
        } else {
            htmlReplace(a, b, nodes[n]);
        }
    }
}
htmlReplace("a", "IT WORKS !!!");

Answer 2

You just need to do the following changes to your manifest:

• Remove the content_scripts section.
• Remove the browser_action.popup entry.
• Add a section: "permissions": ["activeTab"]
• Change your background section to read: "background": { "scripts": ["background.js"] } and rename your file background.html to background.js