Chrome 扩展：添加内容（启用/禁用图标）

Question

I am writing an extension for Google Chrome and I am trying to add content in my current page when the user clicks on the add-on icon.

I would like to add the possibility to enable/disable the extension and to show/hide my injected content for every page.

manifest.json

"content_scripts": [
  {
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "css": ["css/style.css"],
    "js": [
      "js/content.js"
    ]
  }
]

I do not see how to add content only for the page where the icon has clicked because with that, every page has the script.

I also tried something with the background script without success.

Do you have any ideas?

Thanks!

Answer 1

I had built the same feature for my chrome extension. This will create an on/off switch / toggle (so many names when searching google to solve this :) ) I use the massaging between app and content script in the following method:

manifest

inserting my content script on all page (hover.js) and running my extension script (background.js)

....
"browser_action": {
    "default_icon": {
      "19": "icons/icon-active.png"
    }
  },
"content_scripts": [ 
{ 
  "matches": ["<all_urls>"], 
  "css": ["css/hover.css"], 
  "js": ["js/hover.js"] 
} 
],
"background" : { "scripts": ["js/background.js"] },
....

background.js

Here we are preparing the background script (which run on all chrome windows) to send and receive extension status

    // start extension as active
var status = true;

// set toggle of extension on browser action click and notify content script
chrome.browserAction.onClicked.addListener(function(tabs) {
  if (status == 'true'){
    status = false;
    chrome.browserAction.setIcon({path: "icons/16x16.png"});
  } 
  else{
    status = true;
    chrome.browserAction.setIcon({path: "icons/icon-active.png"});
  }
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {status: status});
  });
});

// check status on tab update and notify content script
chrome.tabs.onActivated.addListener(function() {
  if (status == 'true'){
    chrome.browserAction.setIcon({path: "icons/icon-active.png"});
  } 
  else{
    chrome.browserAction.setIcon({path: "icons/16x16.png"});
  }
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {status: status});
  });
});

//send extension status on request
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.status == "getStatus")
      sendResponse({status: status});
});

As you can see there are 3 functions:

1. change the status on browser action button click.

2. check status when you move to a different tab and notify content script (each tab has it's own "instance" of content script so disabling in one tab might still be active in another tab).

3. send response of the status on request from content script.

content script

// check extension status
chrome.runtime.sendMessage({status: "getStatus"}, function(response) {
    if (response.status == 'true'){
        // check elements mouse is hover
        document.addEventListener("mouseover", setLink, true);
    }
    else{
        document.removeEventListener("mouseover", setLink, true);
    }
});

// wait for massage from background script
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.status == 'true'){
        // check elements mouse is hover
        document.addEventListener("mouseover", setLink, true);
    }
    else{
        document.removeEventListener("mouseover", setLink, true);
    }
});

Each content script should first check the status of the extension by sending massage to the background script and recieve a status update.

Also, if we turn the extension off in one tab, when we change tabs we will notify the content script of the change.

I'm sure that this can be done even better in terms of scripting but i hope it will help...

Answer 2

You should be achieve to do this using chrome.tabs.executeScript and chrome.tabs.insertCSS . Full example:

Background.js

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

Manifest.json

{
  "name": "Inject js and CSS",
  "version": "1",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": {
      "16": "icon16.png",
      "19": "icon19.png",
      "32": "icon32.png",
      "38": "icon38.png"
    }
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": [
    "activeTab"
  ]
}

Edit: Updated to use activeTab, event page and new icon sizes.

Answer 3

What do you think about that?

manifest.json

{
  "manifest_version": 2,

  "name": "Extension",
  "description": "My extension",
  "version": "0.1",

  "icons": {
    "16": "icons/icon_16.png",
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  },

  "browser_action": {
    "default_title": "Extension",
    "default_icon": "icons/icon_16_disabled.png"
  },

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

  "permissions": [
    "activeTab",
    "tabs"
  ]
}

background.js

var activedTab = {};
var injectedTab = {};

chrome.browserAction.onClicked.addListener(function(tab) {
  if (typeof activedTab[tab.id] === 'undefined') {
    activedTab[tab.id] = true;
    chrome.tabs.insertCSS(tab.id, {file: 'style.css'});
    chrome.tabs.executeScript(tab.id, {file: 'js/content.js'});
    chrome.browserAction.setIcon({path: 'icons/icon_16.png'});
  } else if (activedTab[tab.id]) {
    activedTab[tab.id] = false;
    chrome.browserAction.setIcon({path: 'icons/icon_16_disabled.png'});
    if (injectedTab[tab.id]) {
      chrome.tabs.sendMessage(tab.id, {greeting: 'hide'});
    }
  } else {
    activedTab[tab.id] = true;
    chrome.browserAction.setIcon({path: 'icons/icon_16.png'});
    if (injectedTab[tab.id]) {
      chrome.tabs.sendMessage(tab.id, {greeting: 'show'});
    }
  }
});

chrome.runtime.onMessage.addListener(function(request, sender) {
  switch (request.greeting) {
    case 'content_injected':
      injectedTab[sender.tab.id] = true;
      if (activedTab[sender.tab.id] == false) {
        chrome.tabs.sendMessage(sender.tab.id, {greeting: 'hide'});
      }
      break;
  }
});

chrome.tabs.onUpdated.addListener(function(tabId) {
  delete activedTab[tabId];
  chrome.browserAction.setIcon({path: 'icons/icon_16_disabled.png'});
});

chrome.tabs.onActiveChanged.addListener(function(tabId) {
  if (activedTab[tabId]) {
    chrome.browserAction.setIcon({path: 'icons/icon_16.png'});
  } else {
    chrome.browserAction.setIcon({path: 'icons/icon_16_disabled.png'});
  }
});

content.js

console.log('loaded');
chrome.extension.sendMessage({greeting: 'content_injected'});

chrome.runtime.onMessage.addListener(function(request) {
  switch (request.greeting) {
    case 'show':
      console.log('show');
      break;
    case 'hide':
      console.log('hide');
      break;
  }
});