3

My chrome extension consists from background.js and content.js which I launch from background.js. I have two icons that show if the extension is on or off and for that I use the following script in background.js based on this example: 

var toggle = false;
chrome.browserAction.onClicked.addListener(function(tab) {
var config = {allPages: []};
toggle = !toggle;   
if(toggle){
      chrome.browserAction.setIcon({path: "on.png"});
      chrome.tabs.executeScript(null, {
            code: 'var config = ' + JSON.stringify(config)
      }, function() {
            chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
                  chrome.tabs.executeScript(null, { file: "content.js" });
            });
      });
      console.log('active ');
}
else{
     chrome.browserAction.setIcon({path: "off.png"});
     chrome.tabs.executeScript(null, {code:"console.log('not active')"});
    }
});

The icon toggling works fine, but script executing doesn't. The content script works even if the icon shows that the extension is off. My code in content.jsis the following:

$(document).ready(function(){
    var url = document.location.href;
    var pageModel = {
        url: url
    }; 
    config.allPages.push(pageModel);

    chrome.storage.local.set({'config': config}, function () {
        console.log('savedPageModelNew: ', config);
    });   
});

How can I toggle not only icons but script executing also? To be frank my script in content.js is rather huge and I can't put it whole here. What I need is the content script that works when the extension is on and "pauses" when the extension is off. Maybe someone has an answer?

I really hope so. Thanks a lot in advance!

P.S. Here is also my manifest.json:

{
  "manifest_version": 2,

  "name": "ChromeExt",
  "version": "1.0",

  "permissions": [
      "activeTab",
      "tabs",
      "<all_urls>",
      "contextMenus",
      "storage",
      "https://*/*", "http://*/*"
  ],

  "browser_action": {
      "default_title": "Inactive.",
      "default_icon": "off.png"
  },

  "background": {
      "scripts": ["background.js"]
  },
  "content_scripts": [
      {
        "matches": ["http://*///*//", "https://*/*"],
        "css": ["mainStyles.css"]
      }
  ]

}

Community
  • 1
  • 1
Ms.Smith
  • 413
  • 1
  • 7
  • 15
  • 2
    We don't need to see your content script. Can you post your manifest.json as you may have your content script defined in there also? Also, you are aware that this will only stop the content script from running if the page was not already loaded when you click disable. – James May 25 '16 at 13:33
  • 3
    If you want the content script which has already been inserted to stop when the icon is clicked, then you will need to send messages to the background page from the content script, and respond to the message with the enabled status. – James May 25 '16 at 13:36
  • @judgeja, thank you for your comment, I added my manifest. Are there any mistakes in it? I'd like my extention to start when it's activated for the 1st time and then after being stopped and started again to continue working (not to start every time I click on the icon to activate the extension). – Ms.Smith May 25 '16 at 13:41
  • 2
    Your manifest is fine. To do what you want you're going to need to send messages between your background page and your content script, as your background page knows the enabled status, and your content script needs to know this information that it doesn't have direct access to. Sending messages between your scripts is very well documented here https://developer.chrome.com/extensions/messaging and I'm sure there's lots of tutorials on writing extensions that use it as it's a very common operation: – James May 25 '16 at 13:59
  • @judgeja, thanks a lot! I'll try to make it the way you advised. – Ms.Smith May 25 '16 at 14:02
  • no problem, good luck :) – James May 25 '16 at 14:12

0 Answers0