CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
Akshay Khetrapal
Akshay Khetrapal

Reputation: 2676

How to trigger a function on specific websites from a chrome extension?

Recently started working with Chrome Extensions. I am trying to figure out how I can execute a function on a specific website only.

For instance, I want to show an alert box on Stack Overflow only. I am using Chrome's Declarative Content API for this to match the host.

I haven't been able to find a similar question on SO for this.

My manifest.json file is running the following block of code in the background.

'use strict';

chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [
            new chrome.declarativeContent.PageStateMatcher({
                pageUrl: {
                    hostEquals: 'stackoverflow.com'
                }
            })
        ],
        actions: [new chrome.declarativeContent.SOOnlyFunction()]
    }]);
});
});

function SOOnlyFunction()
{
    alert('On SO');
}

Upvotes: 3

Views: 2846

Answers (2)

Xan
Xan

Reputation: 77492

You can't use chrome.declarativeContent for anything but what's already built in as actions.

Which is currently specifically ShowPageAction, SetIcon and RequestContentScript (still experimental).

The reason that this can't be easily extended is because declarativeContent is implemented in native code as a more efficient alternative to JavaScript event handlers.

In general, chalk it up as an ambitious but essentially unviable/underdeveloped/abandoned idea from Chrome devs, similar fate to declarativeWebRequest.

See the other answer for implementation ideas using said JS handlers.

Or alternatively, you can still make it "declarative" by using content scripts declared in the manifest that will only activate on the predefined domain (as long as you know the domain in advance as a constant). They can then do something themselves or poke the event/background page to do something.

Finally, if your goal is to redirect/block the request, webRequest API is the one to look at.

Upvotes: 4

eAlie
eAlie

Reputation: 118

You Can use the Chrome API to achieve this behaviour:

  1. When a new Page is Loaded, you can call

    chrome.tabs.onUpdated

    here you can filter the url

  2. and To Create Notifications.

    chrome.notifications.create

In your Manifest add these objects:

"permissions": [  "activeTab","tabs","notifications" ],
"background": {
    "scripts": ["background.js"],
    "persistent": false
}

Here is How my background.js looks like.

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
  if(changeInfo.url != null){

     console.log("onUpdated." + " url is "+changeInfo.url);
     // creates Notification.
    showNotification();

  }

});

function showNotification() {

    chrome.notifications.create( {
      iconUrl: chrome.runtime.getURL('img/logo128.png'),
      title: 'Removal required',
      type: 'basic',
      message: 'URL is',
      buttons: [{ title: 'Learn More' }],
      isClickable: true,
      priority: 2,
    }, function() {});

}

It is incomplete but you will get the Idea.

Upvotes: 6

Related Questions