0

How can you enable chrome extension on a specific web site? for an example

Activate or enable the chrome extension when you visit on a specific website say www.test.com if the user browser through another than www.test.com then the icon should be deactivate or disable the chrome extension. I have read about the pageAction and try to do the following:

manifest.js

{
  "manifest_version": 2,

  "name": "PageAction Sample",
  "description": "PageAction Sample",
  "version": "0.0.1",

  "page_action": {
    "default_icon": {
      "32": "icon32.png"
    }
  },

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

  "permissions": [ "activeTab", "tabs" ]
}

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.url) {
    if (changeInfo.url == 'test.com)) {
      chrome.pageAction.show(tabId);
    } else {
      chrome.pageAction.hide(tabId);
    }
  }
});

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

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page</title>
  </head>
  <body>
    <h3>Login Form</h3>
    <form>
      Username: <input id="username" type="text" name="username"> <br>
      Password: <input id="password" type="password" name="password"> <br>
      <input id="loginbutton" type="button" value="Login">
    </form>
    <script>
      document.getElementById('loginbutton').onclick = function(event) {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        setTimeout(function() {
          alert('Username: ' + username + ' and Password: ' + password);
        });
      };
    </script>
  </body>
</html>

Show the UI (popup.html) page only the url is test.com

Nick Kahn
  • 18,273
  • 84
  • 260
  • 388
  • Does this answer your question? [Background script only for specific domain in Chrome extension](https://stackoverflow.com/questions/29058670/background-script-only-for-specific-domain-in-chrome-extension) – jasonandmonte Oct 06 '20 at 00:05
  • thanks but the question yo posted does not resolve my issue and what it talking about persistent and event page but my question is more towards how can I solved the above issue which I raised – Nick Kahn Oct 06 '20 at 01:08

1 Answers1

0

There are several problems here.

  1. A bug in Chrome that always shows the extension's icon as active on all URLs.

    You'll have to manually change the icon via chrome.pageAction.setIcon in onUpdated event. A more ergonomic/proper solution would be to use chrome.declarativeContent API (instead of onUpdated) with two actions: SetIcon and ShowPageAction (some demos).

    Make a grayscale version of your main icon and specify it as the default icon in manifest.json, then use the above methods to set the normal icon on the matched site.

  2. popup.html isn't specified anywhere. Add "default_popup": "popup.html" inside page_action section as shown in the documentation.

  3. An inline <script> doesn't work in extensions by default so extract it to a separate popup.js file loaded as a standard tag like <script src=popup.js></script>.

  4. chrome.pageAction.onClicked won't work with default_popup so move the contents of onClicked listener (executeScript block) into popup.js, right at the start of it or inside a click listener for some button.

  5. Open the correct devtools console to observe the errors and output instead of using alert.

wOxxOm
  • 43,497
  • 7
  • 75
  • 96