CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
ethanmad
ethanmad

Reputation: 51

Chrome extension that acts only when clicked on certain webpages

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.

Upvotes: 2

Views: 2641

Answers (2)

ethanmad
ethanmad

Reputation: 51

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/*"
    ]

Upvotes: 2

Nubrigol
Nubrigol

Reputation: 1

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

Upvotes: 0

Related Questions