Asked  6 Months ago    Answers:  5   Viewed   332 times

I am in the process of building a Chrome extension, and for the whole thing to work the way I would like it to, I need an external JavaScript script to be able to detect if a user has my extension installed.

For example: A user installs my plugin, then goes to a website with my script on it. The website detects that my extension is installed and updates the page accordingly.

Is this possible?

 Answers

22

I am sure there is a direct way (calling functions on your extension directly, or by using the JS classes for extensions), but an indirect method (until something better comes along):

Have your Chrome extension look for a specific DIV or other element on your page, with a very specific ID.

For example:

<div id="ExtensionCheck_JamesEggersAwesomeExtension"></div>

Do a getElementById and set the innerHTML to the version number of your extension or something. You can then read the contents of that client-side.

Again though, you should use a direct method if there is one available.


EDIT: Direct method found!!

Use the connection methods found here: https://developer.chrome.com/extensions/extension#global-events

Untested, but you should be able to do...

var myPort=chrome.extension.connect('yourextensionid_qwerqweroijwefoijwef', some_object_to_send_on_connect);
Tuesday, June 1, 2021
 
letrollpoilu
answered 6 Months ago
69

Assuming you need it from a website

connect/message method implies that the extension specifically listed your website in the list of origins it expects connection from. This is unlikely unless you wrote this extension yourself, as this cannot be a wildcard domain.

Referring to files within the extension from web context will return 404 simulate a network error unless the extension declared them as web-accessible. This used to work before 2012, but Google closed that as a fingerprinting method - now extensions have to explicitly list resources that can be accessed. The extension you specifically mention doesn't list any files as web-accessible, so this route is closed as well.

chrome.management is an extension API; websites cannot use it at all.

Lastly, if an extension has a content script that somehow modifies the DOM of your webpage, you may detect those changes. But it's not very reliable, as content scripts can change their logic. Again, in your specific case the extension listens to a DOM event, but does not anyhow make clear the event is received - so this route is closed.

Note that, in general, you cannot determine that content script code runs alongside yours, as it runs in an isolated context.

All in all, there is no magic solution to that problem. The extension has to cooperate to be discoverable, and you cannot bypass that.

Assuming you need it from another extension

Origins whitelisted for connect/message method default to all extensions; however, for this to work the target extension needs to listen to onConnectExternal or onMessageExternal event, which is not common.

Web-accessible resources have the same restrictions for access from other extensions, so the situation is not better.

Observing a page for changes with your own content script is possible, but again there may be no observable ones and you cannot rely on those changes being always the same.

Similar to extension-webpage interaction, content scripts from different extensions run in isolated context, so it's not possible to directly "catch"code being run.

chrome.management API from an extension is the only surefire way to detect a 3rd party extension being installed, but note that it requires "management" permission with its scary warnings.

Friday, June 11, 2021
 
daiscog
answered 6 Months ago
14

Perhaps, don't show the button until you intercept the automatic pop-up?

or
In your code, check to see if the window is standalone
If it is, you need not show the button

if (window.matchMedia('(display-mode: standalone)').matches) {  
    // do things here  
    // set a variable to be used when calling something  
    // e.g. call Google Analytics to track standalone use   
}  

My example tester here
https://a2hs.glitch.me

Source code for my tester
https://github.com/ng-chicago/AddToHomeScreen

Sunday, August 1, 2021
 
seaders
answered 4 Months ago
62

I have written a sample trivial demonstration of Browsing Data API, it can help you to pick from here. Deletion may take time so you have to wait for message "All data is Deleted..." in console of extension for confirmation.

Before:

enter image description here

After:

enter image description here

manifest.json

{
  "name" : "BrowsingData Demo",
  "version" : "1",
  "description" : "Trivial Demonstration of Browsing Data",
  "permissions": [
    "browsingData"
  ],
  "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.html

<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>

popup.js

   function browsingdata(){
    chrome.browsingData.remove({
      "originTypes": {
        "protectedWeb": true, // Set to true or true as per your requirement
        "unprotectedWeb":true,// Set to true or true as per your requirement
        "extension":true    // Set to true or true as per your requirement
      }
    }, {
      "appcache": true, // Set to true or true as per your requirement
      "cache": true, // Set to true or true as per your requirement
      "cookies": true, // Set to true or true as per your requirement
      "downloads": true, // Set to true or true as per your requirement
      "fileSystems": true, // Set to true or true as per your requirement
      "formData": true, // Set to true or true as per your requirement
      "history": true, // Set to true or true as per your requirement
      "indexedDB": true, // Set to true or true as per your requirement
      "localStorage": true, // Set to true or true as per your requirement
      "pluginData": true, // Set to true or true as per your requirement
      "passwords": true, // Set to true or true as per your requirement
      "webSQL": true // Set to true or true as per your requirement
    }, function (){
        console.log("All data is Deleted...");
    });
}
window.onload=browsingdata;

For more information refer browsing data API to get idea of all methods etc.

Wednesday, August 4, 2021
 
tedders
answered 4 Months ago
19

My problem get to solved by removing the plugin completely from chrome store and re-upload and re-publish the plugin again.

The problem was : Initially i did not had 'externally_connectable' property, so wasn't able to get chrome.runtime defined. Later when i included, then i was updating the chrome plugin. And the main cause may be : 'Chrome store does not modify the 'manifest.json' (at least for certain properties like 'externally_connectable') just by updating the plugin by uploading. You may have to remove and re-upload to get manifest.json updated' (This is what i can conclude because of my experience, Please correct me if i am wrong with some valid reference source.)

and so 'chrome.runtime' remains undefined.

Later when i removed the plugin and re-uploaded, everything worked fine.

Friday, November 5, 2021
 
fadd
answered 3 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share