Relative url for private addon manifest

Add-ons Add-on Support
#1

Hello,

I created a small addon that adds clipboard functionality for our web app FastX.
I only want this addon enabled when users go to the FastX page.
However, we do not host FastX. Customers purchase the entire server and host it themselves.

I am trying to figure out how to edit the manifest to allow the addon only on specific hosts, when the host is not known beforehand.

Here is my manifest. The “matches” portion matches the pages that this would be valid in, but any website that has this url would also match. Is there a better way to do this? Is there a different way my web page can send a message to an addon to load it?

{

“manifest_version”: 2,
“name”: “FastX”,
“version”: “1.0”,

“description”: “Adds extra functionality to FastX sessions.”,

“icons”: {
“48”: “fastx-48.png”,
“96”: “fastx-96.png”
},
“browser_specific_settings”: {
“gecko”: {
“id”: “fastx@starnet.com”,
“strict_min_version”: “63.0”
}
},
“content_scripts”: [
{
“matches”: [
“https:///client/connect”,
“https:///client/shortcut”,
“https:///client/custom”,
“https:///client/share”
],
“js”: [“fastx.js”]
}
],
“permissions”: [
“clipboardRead”,
“clipboardWrite”
]

}

#2

Well, if you can’t create matching wild-card:


Then you will have to ask for all hosts: <all_urls>.

BTW to format your code here, place this on the line before and after: "```"

1 Like
#3

I can create a wildcard match, but in theory any other url that a user goes to with a uri match /client/connect (for example) will also match. This is my first addon so I am trying to play nice with other websites :slight_smile:

#4

So how can you tell it’s your page? Are you serving your javascript on that page?
Anyway, what you can do is watch what pages is user loading and if he loads one matching your description, you inject there your script that will detect if it’s really your page. You page can communicate with your addon using the window.postMessage.

#5

Maybe that’s the better question. Right now the entire extension is an event listener like the following.

window.addEventListener('message', async e => {
 //do my custom stuff here
 });

My web site’s javascript just sends a window.postMessage and assumes it will be picked up (if the extension exists) or dropped if it doesnt.

Should I add a dummy

and check if it exists before creating the event listener? Is there a best practice regarding this?
#6

Window.postMessage() > Using window.postMessage in extensions

I don’t know if this applies in OP’s case, but it seemed worth mentioning.

#7

Other extensions with similar “self hosting” problems require the user to explicitly say “I’m currently on a page where this extension should work”, which then leads to the extension prompting for the host permission for the current origin. And from then on the extension will always run on that host or even path.

#8

I implemented optional host permissions recently but my approach is a bit clunky so it would be useful to see examples of where this is implemented nicely.

1 Like
#9

As a follow up to this question.

I toyed around with different options.
I tried to have the addon use CustomEvent and dispatchEvent, but that did not seem to work.

Extensions can receive postMessage ( thanks hans_squared)

So I ended up listening and loading the extra functionality when a custom event occurs. I used the browser.runtime.id (since it should be unique) as a way to differentiate the messages

In the extension

window.addEventListener('message', function cb(evt) {
  if(evt.data.msg !== browser.runtime.id)
    return;
  window.postMessage({
    msg: browser.runtime.id + '-ready',
    body: {
      extensions: loadExtensions(evt.data.body)
    }
  }, '*');
  evt.currentTarget.removeEventListener(event.type, cb);
});

In the scripts that from my web pages

   window.addEventListener('message', function cb(evt) {
      if(evt.data.msg !== 'fastx@starnet.com-ready')
        return;
      console.log('FastX extensions loaded:', ...evt.data.body.extensions);
    });
    window.postMessage({
      msg: 'fastx@starnet.com',
      body: {
        clipboard: true
      }
    }, '*');

The body lets me define certain features for different pages.