Chrome Extension - Content Scripts Piling Up Multiple Times From AJAX Links/Navigation

StackOverflow https://stackoverflow.com/questions/7835743

题

I am super close to getting my Chrome Extension running perfectly, but am running into one last issue now.

The problem seems to be related to the content script being injected repeatedly on sites like Facebook, where the entire page is not reloaded upon clicking a link, etc...

I think the issue is related to the site being very AJAX-dependent.

If I refresh the entire page, or load it for the first time, then there is no problem. My extension runs and the content script is injected properly.

However, if I load the page the initial time, then click on a link on the site, the "content section" of Facebook will load whatever link you clicked on, while the floating blue navigation bar at the top doesn't refresh or change at all.

I.E. the entire page does not reload. Since both the "content section" of the site and the navigation bar are both in the same frame, the content script just keeps getting injected another time for every link you click.

So eventually I see in my console log that it's running 2X, 3X, 4X, 5X etc.. As I click around on more links, the number increases by 1 each time.

So my question is this:

Is there a simple way to check if the content script is ALREADY present/active before injecting it again? Or what else can be used as a work-around for a situation like this?

有帮助吗？

解决方案

I predicted a similar problem when writing the content script for my extension so I added a unique attribute to the <body> element of each page with the extension name and version.

First thing the content script does is check if this attribute already scripts and stops if it does. Otherwise, it will add this attribute (with a value of true) and continue with its purpose.

If you want to see my solution;

The slightly more complicated aspect of this technique is fetching the version using message passing and parsing the manifest (retrieved in an AJAX request) in to a JSON object.

To see exactly how I achieved this look at the init and onRequestHelper functions here;

Of course, you could just hard code the version or omit it entirely. So long as the attribute name is unique.

其他提示

In the parent frame, could you add window.doneInjecting = true; or something similar? (or perhaps add a hidden element to the page - I'm not sure if child frames can access their parent's JavaScript variables)

But basically setting a simple flag, so that each time your content script is injected, check if the flag exists and only continue if it doesn't?

onUpdated fires each time a tab's state changes. just load your content scripts at changeInfo.status == "complete"

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.tabs.getSelected(null, function(tab) {
    // Do some stuff
    if (changeInfo.status == "complete")
    {
        // load your scripts here
        chrome.tabs.executeScript(tabId, {file: "jquery.js"});
        chrome.tabs.executeScript(tabId, {file: "jquery.highlight.js"});
    }
});
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top