CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
KitKarson
KitKarson

Reputation: 5637

Default popup matching URL

I test an online-survey application. I have hundreds of textboxes in my application in which I have to enter some numbers for testing purposes. So I am creating a Chrome extension to fill the form. I did it and it works almost as I expected - except there is a small issue.

manifest.json:

{
  "name": "FillForm",
  "version": "1.0",
  "manifest_version": 2,
  "description": "FillForm",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

Whenever I click on the browserAction button - it opens the popup.html where there is a textbox. If I enter 1 there, it will enter 1 for all the textboxes in my application - this is what I wanted.

Now I want to open the popup.html only for my application, i.e. matching URL http://example.com, because I do not want to enter any information in any other pages.

How can i achieve this?

Upvotes: 0

Views: 446

Answers (2)

Xan
Xan

Reputation: 77531

This is the exact purpose of Page Actions: to provide a button that's only visible on certain websites.

First, change your browser_action key to a page_action:

  "page_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

You need to decide yourself when to show it. With declarativeContent API, you can provide a set of rules that say when you want to do it.

Add the declarativeContent permission:

  "permissions": ["activeTab", "declarativeContent"]

Then, add a background script that will manage the rules. Since you don't need the background script to be always active, it's a good fit for an Event Page.

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

Now, the event page code:

// eventPage.js

// This only needs to run on install/update, rules are remembered
chrome.runtime.onInstalled.addListener(function(details) {
  var rule1 = {
    conditions: [
      new chrome.declarativeContent.PageStateMatcher({
        // See declarativeContent docs for more options
        pageUrl: { hostEquals: 'www.example.com' }
      })
    ],
    actions: [ new chrome.declarativeContent.ShowPageAction() ]
  };

  // Remove existing rules, if any
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {  
    // Then, add our rule1
    chrome.declarativeContent.onPageChanged.addRules([rule1]);
  });
});

Upvotes: 1

Gaël Barbin
Gaël Barbin

Reputation: 3919

I would inject the content of your popup.html in the pages matching specified URL.

  • This simplify your actions to fill your forms (you do no have to click on the extension icon)
  • It does not glut your browser with an additional icon

For doing this, first modify your manifest: 

{
  "name": "FillForm",
  "version": "1.0",
  "manifest_version": 2,
  "description": "FillForm",
  "content_scripts": [
  {
    "matches": ["http://*.xxx.com/*"], // put your URL pattern here
    "js": ["popup_inject.js"]
  }
],
  "web_accessible_resources": ["popup.html"]
  "permissions": ["activeTab"]
}

and in popup_inject.js

var iframe  = document.createElement ("iframe");
iframe.src  = chrome.extension.getURL ("popup.html");
iframe.style.position="absolute";
iframe.style.top="10px";
iframe.style.right="10px";
iframe.style.border="solid 1px #aaa";

document.querySelector("body").appendChild(iframe);

Upvotes: 1

Related Questions