1

I am experimenting with Google Chrome Extensions and first problems I have is that I want to automaticly change body background color when page is loaded (without clicking on extension icon) but my content scripts are not firing up:

manifest.json:

{
  "name": "Test Extension",
  "description": "Testing",
  "version": "1.0",
  "permissions": [
    "tabs", "webNavigation"
  ],
  "browser_action": {
      "default_title": "Set this page's color.",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "content_scripts": [
  {
  "matches": ["http://*/*", "https://*/*"],
  "js": ["core.js"]
  }
  ],  
  "background": {
    "scripts": ["background.js"]
  },

  "manifest_version": 2
}

core.js:

chrome.tabs.executeScript(null,{code:'document.body.style.backgroundColor = "green";'});

Not working solution background.js:

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    chrome.tabs.executeScript(null,{file:"core.js"});
});

Where is the problem? Please for help.

Artimal
  • 651
  • 7
  • 24
  • look at the documentation on how to write a content script. core.js is where the code goes, not tbrough excutescript. – Zig Mandel Mar 27 '17 at 11:47
  • just write : window.onload=function(){ document.body.style.backgroundColor = "green"; } instead executeScript in your core.js file – OriEng Mar 27 '17 at 11:49
  • I have done it and it seems core.js is not running... – Artimal Mar 27 '17 at 12:08
  • @Edenwave Why not ? where and what you try ? I try this and it's work for me – OriEng Mar 27 '17 at 13:16
  • I changed code of core.js to one you typed in your last answer. Core is not executing and I don't know why. – Artimal Mar 27 '17 at 13:27
  • Something write in the console ? on which website you try ? try to console.log something in additon to the change color and check again : window.onload=function(){ console.log("test!"); document.body.style.backgroundColor = "green"; } – OriEng Mar 27 '17 at 13:36
  • Console.log is not executing, like all the core.js file... :C – Artimal Mar 27 '17 at 13:46
  • @Edenwave I post my code that work for me , try it . – OriEng Mar 27 '17 at 13:58
  • I suggest you read the [Chrome extension overview](https://developer.chrome.com/extensions/overview) (perhaps along with the pages linked from the overview). The [architecture section](https://developer.chrome.com/extensions/overview#arch) has overall architecture information which should help your understanding of how things are generally organized/done. You will probably also want to read [Content Scripts](https://developer.chrome.com/extensions/content_scripts). – Makyen Mar 28 '17 at 00:24
  • What *exactly* is shown in the [various appropriate consoles for your extension](http://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? Based on your code, you should have gotten some specific errors which would have helped inform you as to what the problem is. – Makyen Mar 28 '17 at 00:27

1 Answers1

3

Better solution's for you it's just use the content script and to wait until load and not execute script:

manifest.json

 {
  "name": "Test Extension",
  "description": "Testing",
   "version": "1.0",
   "permissions": [
     "tabs", "webNavigation"
   ],
   "browser_action": {
   "default_title": "Set this page's color.",
   "default_icon": "icon.png",
   "default_popup": "popup.html"
    },
   "content_scripts": [
   {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["core.js"],
      "run_at": "document_end"
   }
 ],  
 "manifest_version": 2
}

core.js

  window.onload=function(){ 
   console.log("test!!");
   document.body.style.backgroundColor = "green"; }

popup.html no matter here. I just try it and it's work in change the background color to green in any site (you could try on stackoverflow) and console also.

OriEng
  • 1,424
  • 18
  • 34