Chrome extension that acts only when clicked on certain webpages

Question

I'm trying to get my Chrome extension to pop up an alert when the user is on http://google.com/ and clicks on the extension icon.

I have the following manifest:

{
   "manifest_version": 2,

   "name":  "One Megahurt",
   "version": "0.1",

   "permissions": [
       "activeTab"
    ],

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

    "browser_action": {
        "default_icon": "icon.png"
    } 
}

and this is bg.js:

chrome.browserAction.onClicked.addListener(function(tab) {
     alert('Test!');
})

This code will allow popup an alert on any website, as I don't have any restrictions on which websites this works on. I tried using

if(tab.url === "https://google.com/")

between the first and second lines, but that didn't work.

I'm not sure if I should even be using a background script rather than a content script. I looked in Google's examples and tried using the implementation in "Page action by URL", but that didn't work for me either.

Any help would be appreciated. I should note that I don't really care about the specific issues with the URL--google.com is merely an example. I want to learn to use this for other projects and websites.

EDIT: Adding urls to permissions doesn't restrict which websites the alert pops up on, either.

Yep, page actions is the way to go then. If you can't get it to work, you have to try harder ;) https://developer.chrome.com/extensions/pageAction — Felix Kling, Mar 19 '14 at 16:16
Were you definitely on `http://google.com/`? When I visit `http://google.com/` I'm redirected to `https://www.google.com/` followed by a query string. — James Donnelly, Mar 19 '14 at 16:16
There is likely to be a path and query params so you probably want something like `tab.url.indexOf("http://google.com/") === 0` — abraham, Mar 19 '14 at 18:25
@abraham, I tried adding an if clause with that inside to the function, but now I don't get an alert on any web pages. Any suggestions? — ethanmad, Mar 20 '14 at 00:53
@FelixKling, I'm not trying to get an icon in the omnibar, I just want to restrict when the function is called. — ethanmad, Mar 20 '14 at 00:58
@JamesDonnelly, you're right, the URL should be https://google.com/ , but fixing that doesn't solve the issue. The alert is still never opened. — ethanmad, Mar 20 '14 at 00:58
Yes, page actions are still the way to go. From the documentation: *"Do use page actions for features that make sense for only a few pages."* — Felix Kling, Mar 20 '14 at 01:08
@FelixKling Oh, yes, I see why you suggest page actions. That's not what I intended, but it's actually cleverer in that the user can only interact with the extension when I allow. I'll be using page actions for this project. — ethanmad, Mar 20 '14 at 01:11

score 2 · Accepted Answer · edited Dec 15 '20 at 01:19

I ended up using page actions for my solution, per Felix King's suggestion. In retrospect, this was the best solution to use because it doesn't load the extension on every page and cause browser slowdowns (as far as I know).

In addition to adding domains to permissions in the manifest, add a the following code to a background.js.

// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL matches one of the following ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlMatches: 'http://google.com/' }, // use https if necessary or add another line to match for both
          }),
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlMatches: 'http://facebook.com/*' },
          }) // continue with more urls if needed
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction()]
      }
    ]);
  });
});

chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, { file: "script.js" });
});

Key sections to add in manifest.js are:

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

&

"permissions": [
        "declarativeContent", "tabs", "activeTab", "http://google.com", "http://facebook.com/*"
    ]

score 0 · Answer 2 · answered Mar 19 '14 at 16:22

I don't have much experience with this, but looking at the example manifests that I've seen, they usually have the a list of domains under permissions. I'm betting that if you used:

"permissions": ["http://www.google.com/", "https://www.google.com/", https://google.com, https://google.com],

it would only run the code on the permissible pages.

Pulled example from: http://developer.chrome.com/extensions/overview

More detailed info here: http://developer.chrome.com/extensions/declare_permissions

While I may need to use permissions to access certain features on the page, adding URLs to permissions does not restrict the pages that the extension works on. — ethanmad, Mar 20 '14 at 00:48

Chrome extension that acts only when clicked on certain webpages

2 Answers2

Linked