Open new tab with chrome extension an inject css with jQuery

Question

I use a chrome extension with a popup to inject a website and hide some divs.

The problem now is, I want to open a new tab with the url: https://app.example.de/dashboard/ and inject the style with my contentscript.js
Another problem is: Sometimes the application reloads the page. After this, all injections are lost. Is there any chance to inject allways the https://app.example.de/dashboard/ without click on the popup.html-Button?

The following code works fine, if the page is already open.

manifest.json

{
"name": "example stealth mode",
"version": "1.1",
"description": "lorem ipsum",
  "browser_action": {
  "default_icon": "icon-on.png",
    "default_popup": "popup.html",
  "default_title": "example stealth mode"

},
"manifest_version": 2,
"content_scripts": [
    {
      "matches": ["https://*.app.example.de/*"],
      "js": ["jquery-1.11.0.min.js", "background.js"]
    }
  ],
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "tabs", "https://*.app.example.de/*"
    ]   
}

popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('On').addEventListener('click', clickHandlerOn);
})
// An
function clickHandlerOn(e) {
    chrome.extension.sendMessage({directive: "popup-click"}, function(response) {
        this.close(); // close the popup when the background finishes processing request
    });
}

background.js

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
        switch (request.directive) {
        case "popup-click":
            // execute the content script
            chrome.tabs.executeScript(null, { // defaults to the current tab

                file: "contentscript.js", // script to inject into page and run in sandbox
                allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
            });

            sendResponse({}); // sending back empty response to sender
            break;
        default:
            // helps debug when request directive doesn't match
            alert("Unmatched request of '" + request + "' from script to background.js from " + sender);
        }
    }
);

contenscript

$(document).ready(function() {
    $('div#hlXXXContent').hide();
    $('#hlYYY').hide();
    $('#hlZZZ').hide();
    $('h3.hlVVV').append(' Stealth Mode');
});

popup.html

<li><button class="hl123" id="On"><span class="hlSubmenuSelected">Stealthmode on</span</button></li>

sowbug sowbug · Accepted Answer · 2014-04-18T03:49:29

The filename contentscript.js is odd because it's not a content script as you're using it. Why don't you try experimenting with run_at and have something load on each target page load, and that'll be your opportunity for your code to decide whether to do more things to the page.

Open new tab with chrome extension an inject css with jQuery

1 Answers