0
chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete' && tab.active) {
    chrome.tabs.query({active: true,lastFocusedWindow: true}, function(tabs) {
     var tab = tabs[0];
     if(tab.url.indexOf("local")>-1){
        function(tab){
        alert("Test");
        chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='yellow'"});
        console.log("injected");
     }
}
      }

  }
});

This is manifest.json:

{
  "manifest_version": 2,
  "name": "Environment Locator",
  "description": "My Extension",
  "version": "1.0",

  "permissions": [
    "tabs"
      ],

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

I want to inject some js code using chrome extensions to the pages whose URLs contain some predefined strings. 1. I want this code will be displayed in all the pages. When tab is updated the url should be checked again. 2. Extension will be run without any user click. No pop up.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
Zahra
  • 1
  • 3
  • This code is in background.js. It doesn't work! I used a file.js instead of code as that script is not all the code that I want to inject. It didn't work neither. – Zahra Aug 30 '16 at 17:44
  • Well, the code looks okay, I would just use `currentWindow: true` instead of lastFocused. Or maybe I would simply use `tab.url`. It's probable your manifest.json is incorrect. – wOxxOm Aug 30 '16 at 17:46
  • This is Manifest file used:{ "manifest_version": 2, "name": "Environment Locator", "description": "My Extension", "version": "1.0", "permissions": [ "tabs" ], "background": { "scripts": ["background.js"] , "persistent": false } } – Zahra Aug 30 '16 at 17:47

1 Answers1

2

Programmatic injection

In case the content script is injected from the background page script, manifest's "permissions" should contain the allowed urls, or "<all_urls>" to permit injection on all supported urls. When developing extensions with a background page you must use the background page debugger where you would see an error for missing permissions immediately.

Declarative injection

If the only thing to change is CSS style, there's no need for a background script or any js at all!
Declare a CSS content script in manifest.json that runs on the matching URLs:

"content_scripts": [{
    "matches": ["*://*/*local*"],
    "css": ["style.css"],
    "run_at": "document_start"
}],

and style.css:

body {
    background-color: yellow !important;
}
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • Thanks, I will change the code accordingly. However, the change is not only CSS style I used the simplest thing to test it. I had used content script and matches to limit the allowed URLs. I couldn't get it done that way. – Zahra Aug 30 '16 at 18:04
  • I changed the background file and now I am able to capture the URLS I am interested in. One more step forward:) Now, I am modifying the DOM of the desired pages. My initial attention was to add a customized horizontal bar displaying some info about that page . I don't know what item should be added . As a test, I appended a button and it works properly.I guess that horizontal bar is kinda a table I guess .Any idea? – Zahra Aug 31 '16 at 18:56
  • StackOverflow isn't a forum/chat, it's a QA knowledge database, so what you're asking is an entirely different topic, and no, I have no idea what the problem is even though I've read the description of the problem twice. Try solving it and if stuck, post a question properly: with all required info so that whoever reads wouldn't have to shoot wild guesses. – wOxxOm Aug 31 '16 at 19:00
  • Content script debugging is extremely helpful: F12 on webpage - Sources panel - Content scripts (on the left) - expand the list and find your script, then set a breakpoint and reload the page or reinject the script. The debugger should pop up where you can inspect the values and step through the code. You can also add `debugger;` statements inside the injected code itself. – wOxxOm Aug 31 '16 at 19:07