CODEWITHSUNDEEP
javascriptgoogle-chrome-extensioninclude
Keven Wang
Keven Wang

Reputation: 1278

detect if Chrome extension content script has been injected / content script include guard

I want to execute a content script function whenever a tab is updated. The problem is that, sometimes the tab update is ajax (without a page reload), while still changing the page's url. Therefore the old content script injected still exists on the page. The result is multiple instances of content script injected and running on the same page.

So, I'm looking for a mechanism to inject a content script, only if no same content script has been injected before. Any ideas?

Upvotes: 10

Views: 8383

Answers (2)

Rob W
Rob W

Reputation: 349222

Implementing an include guard is extremely easy:

(function() {
    // Comparing to a literal value to prevent matching a DOM element with id="hasRun"
    // https://stackoverflow.com/q/3434278/do-dom-tree-elements-with-ids-become-global
    if (window.hasRun === true) return;
    window.hasRun = true;
    // Rest of code
})();

If you want to programatically inject a content script, consider using one of the webNavigation events (e.g. onCommitted) instead of chrome.tabs.onUpdated. Unlike the tabs events, the webNavigation events are also triggered for navigation within frames, and offer a way to declare an URL filter in advance.

Upvotes: 10

Uzair Farooq
Uzair Farooq

Reputation: 2447

You can try sending a message to content script (Message Passing). If the content script successfully returns a response then it means that the content script is already there otherwise an empty response is returned, you can check for an empty response and inject the content script.

Background:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
        if (response) {
            console.log("Already there");
        }
        else {
            console.log("Not there, inject contentscript");
        }
    });
});

ContentScript:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting == "hello")
            sendResponse({message: "hi"});
 });

Upvotes: 15

Related Questions