0

I'm building my first basic chrome extension that when clicked, it takes the url of the current tab, opens a new page at a different address (always the same url) and sends the copied url to it.

I have this working, but for 1 issue. Every time the user clicks the extension, it injects the script. So if they click the extension a second time for the same tab, it will open 2 tabs new tabs, then 3 tabs on the third click, and so on.

I thought I had solved it using this solution but now what happens is when a user clicks the extension for a given tab, it will only open it once, even after 2, 3, 4 clicks (which is good), but if a user switches to a different tab and clicks the extension, nothing happens.

I can kind of see why this is happening, I guess it's now setting a flag for all tabs so once the script is injected in a tab, regardless of which tab, the flag is set and any future injection attempts are blocked. I'm trying to figure out how to set a flag just for the tab that was clicked, and not for all tabs?

Ultimately, I just want the user to be able to click the extension and it will open 1 tab per click.

This is my code

background.js

// Do this when the browser extension icon is clicked
chrome.browserAction.onClicked.addListener(tab => {
    // inject content.js into activeTab

    if (window.qqq !== true) {
        window.qqq = true;
        chrome.tabs.executeScript(tab.id, {
            file: "content.js"
        });
    }

    // Message the active tab to say the extension button has been clicked
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        let activeTab = tabs[0];
        chrome.tabs.sendMessage(activeTab.id, {
            message: "add_url_clicked",
        });
    });
});

// Listen for a URL and when received, open the app and append the requested
// URL using HTTP GET
chrome.runtime.onMessage.addListener(request => {
    if (request.message === "open_links_app_with_new_url") {
        chrome.tabs.create({
            url: request.app + "/?url=" + request.destination
        });
    }
});

content.js

// Listen for a browser click and when received, open a new tab with the url created below
chrome.runtime.onMessage.addListener(request => {
    if (request.message === "add_url_clicked") {
        // Get URL to send to app
        let destination = window.location.href;

        localStorage.setItem('url', destination);
        chrome.runtime.sendMessage({
            message: "open_links_app_with_new_url",
            app: "https://destination_url",
            destination: destination
        });
    }
});

and if it helps, manifest.json

{
    "name": "Links",
    "manifest_version": 2,
    "version": "0.2",
    "description": "etc",
    "browser_action": {
        "default_icon": {
         ....
        }
    },
    "permissions": ["activeTab"],
    "background": {
        "scripts": ["background.js"]
    },
    "icons": {
         ....
    }
}
StevieW
  • 163
  • 6
  • The `true` check should be inside the content script as explicitly stated in the linked answer. BTW if `app` link is not determined from DOM, you can do everything in your background script, no content script needed. – wOxxOm Feb 20 '20 at 14:57
  • Oh yeah! Thank you for pointing that out, was going round in circles. – StevieW Feb 20 '20 at 15:18

0 Answers0