Webextension: Variable match pattern for content script

Add-ons Development
#13

[quote=“freaktechnik, post:12, topic:13144”]
What declarativeContent lets you do is attach a content script based on conditions you define at run-time, which is what you are asking for, essentially.[/quote]OK. It wasn’t clear from the link that you could use it to inject a content script - indeed it says it allows you do things ‘without needing to … inject a page script’. My misunderstanding. Never mind - I have a method that should work.

Thanks for the link to Embedded webextensions There is no mention there of Android compatibility but I assume it’s not available for Android yet.

My sdk addon currently runs on Android and I would like to make a transitional version of my addon (that stores the simple prefs, in preparation for conversion to a webextension) but I’d like it to work on Android too. Is it possible to code it so that it will not fail on Android while embedded webextensions are not available, but will use the feature once it’s released?

I want to avoid a plethora of versions:

  • android without transition features
  • desktop with transition features
  • desktop and android both with transition features
  • desktop webextension (by Fx 57)
  • both as webextension (by Fx ??)

Do you see what I mean?

#14

According to the dev who implemented it embedded WebExtensions also work on Android, however it will limit you to only use features Firefox for Android supports in your WebExtension.

#15

That’s good (and worth documenting). I think I only need storage.local and runtime.sendMessage() and both are available for Android.

Thanks for your help.

#16

Testing this in Fx 53.0a2 (2017-01-29) (64-bit), and following the documentation here , in my background script I have:

browser.webNavigation.onCompleted.addListener(indexPageListener, UrlFilter1 ) ;

But I get:

TypeError: browser.webNavigation is undefined

(The browser object is defined.)

#17

You need to add the "webNavigation" permission!

#18

Thanks, yet again!
…

#20

I’ll continue this thread for another issue from converting my addon from SDK to webextensions. I’m testing with Fx 53.0a2 (2017-01-29) (64-bit)

In the SDK addon one of my content scripts sends a message to the background script, which then reads the site’s RSS feed and sends a response. (I couldn’t do that in the content script because the RSS feed has a different origin.) It uses port.emit in both content and background script.

I have converted that to use runtime.sendMessage. The content script how has:

message = [... an array of strings ...] ;       // from SDK version code  
// 'message' now has to be sent in an object
var messageObj = new Object() ;
messageObj['theMessage'] = message ;
var sending = browser.runtime.sendMessage( messageObj ) ;
sending.then(handleResponse, handleError);
 ...
  
/* Message error */  
function handleError(error) {
  console.log(`SendMessage error: ${error}`); 
}    
  
/* Process response from background script to RSS check */
function handleResponse(RSSresponseObj) {
...

This generates an error:
SendMessage error: Error: Constructor Request requires ‘new’

In case it’s relevant, the background script still has the SDK’s request API so that might be implicated, though the error comes from the sendMessage error handler.

Subsidiary question. It’s not clear whether the SDK request API will still work in a webextension. The existence of the old code doesn’t generate an error, but I don’t think it’s been executed yet. The documentation says I should use webextensions instead, and I set out today to convert it … but I’m not clear what API is the equivalent of request.get().

#21

It’s not clear whether the SDK request API will still work in a webextension.

You can’t use anything you needed to get through require() in the SDK.

You can use this code. Besides being much more readable, it should give you a stack trace to your error:

var sending = browser.runtime.sendMessage({
    messageObj: [ /* ... an array of strings ... */ ], // from SDK version code
})
.then(RSSresponseObj => {
    // ...
})
.catch(error => console.error('SendMessage error', error));

And since you are using Firefox 52+ anyway, you could even use async/await.

#22

[quote=“NilkasG, post:21, topic:13144”]
Besides being much more readable…[/quote]
To you maybe ; )

AFAICS (though I’ve never used arrow functions) your code is just another way of doing the same thing. I followed the examples here Does your reference to a stack trace imply you think my code is not the problem? (I’ve no experience of stack traces.)

And, on the subsidiary point, you confirm what I thought, but what is the equivalent of request.get()? I’ve looked through all the webextension APIs and can’t find anything. Do I have to use xmlhttprequest in the background script?

Edited to add: I changed the code to match yours. This time I get:
SendMessage error <unavailable>

#23

Do I have to use xmlhttprequest in the background script?

That or maybe the fetch API.

Edited to add: I changed the code to match yours. This time I get:
SendMessage error

Meh. This is a Firefox bug. Maybe you can see it in a different console (Add-on debugger). Otherwise try to log the error.stack.

To you maybe ; )

It surely is a matter of style and I certainly can’t tell you how to code, but:
If you use named promise handlers in more than one case, the code will be a “callback hell”. One of the very points of Promises is to avoid that.
There is absolutely no point in calling new Object().
If you log errors, use console.error(). And generally log the error as an object, don’t concat it with the string.

#24

OK. I appreciate your help.

No excuses, but I learned to program in the '60s - before OOP existed. So I rarely use one statement when three is clearer to me. I’ll plug on …

#25

I learned to program in the '60s

Wow :smiley: I don’t think I have ever met someone who could say that about himself.

So I rarely use one statement when three is clearer to me

Even at the risk that you already know this: I think you would really like async functions.

#26

I finished the webextension version of my Jolla Askbot Unseen Posts addon - it’s described in the OP - a month ago (v2.0.0). I tested it with Fx 53 developer edition. (I don’t intend to release it until it works with Android which needs the options_ui API.) I didn’t try it with the then-current Fx 51.

Since then I updated the existing SDK version to include an embedded webextension to handle the eventual transfer of prefs from simple-prefs to browser.storage.local (v1.1.6). That works in Fx 51 and now in Fx 52.

I just tried the webextension version (v2.0.0) in Fx 52 and it doesn’t work. On the console I get:
Error: prefs is undefined (unknown)

It still works in Fx 53 - and now Fx 54 - but not Fx 52.

‘prefs’ is the name of the object I write to browser.storage.local which contains the options, migrated from simple-prefs. The background script starts with this:

// Start: retrieve the stored prefs
var prefs = new Object() ;
var gettingItem = browser.storage.local.get('prefs') ;
gettingItem.then(onGot, onError) ; 

function onGot(item) {
  if (item['prefs']!=undefined) {
    prefs = item['prefs'] ;
  }
  else {
    prefs['colorS'] = "green" ; 
    prefs['colorU'] = "red" ;
// ... more like that ...
// Store default prefs
  	setting = browser.storage.local.set({prefs}) ;
    setting.then(null, onError);
  }
  mainScript() ;
}

The storage object is also saved in the options.js script but it fails without going there. And as I said, it all works in Fx53/54.

I mentioned the transition version v1.1.6 earlier in case the fact that its embedded webextension will have created the ‘prefs’ object in storage.local in the first place, to be be picked up by the webextension version 2.0.0. I don’t think that causes the problem - the transition from v1.1.6 to v2.0.0 works fine in Fx 53 - and AFAICS v2.0.0 fails without being installed over v1.1.6.

Where it this ‘prefs is undefined’ message from? What does ‘unknown’ instead of a js file/line mean?
I’m guessing that something is wrong with storage.local, or my use of it.

The webextension (v2.0.0) is here:
https://dl.dropboxusercontent.com/u/862480/temp/jolla_together_unseen_posts_2.0.0.xpi

#27

Where it this ‘prefs is undefined’ message from?

I have installed and repetedly started your Extension in FF 52 and each time it reached the mainScript() statement without any exceptions.
Firefox’s debugger really sucks though. I haven’t been able to break on any breakpoints, even though they were defensively passed -.-

What does ‘unknown’ instead of a js file/line mean?

I think that happens if the error is thrown in a different context then the console runs in and the console fails to copy the stack trace information. Where did you get that error from?

I’m guessing that something is wrong with storage.local, or my use of it.

The only mistake I see is he undeclared setting variable, but that’s fine as long as you don’t add a "use strict"; or it clashes with something else.

#28

The addon colours dates on the Jolla Together site and the error message occurs when you load a page from that site. For example if you go to
https://together.jolla.com/questions/
which causes the background script to call content script
jolla_together_unseen_posts_3.user.js
If, on that questions page, you open any question then it calls content script
jolla_together_unseen_posts_1.user.js
and the date/times (eg “asked 7 hours ago”) should initially be red (it shows you haven’t seen it before). If you refresh it should go green. That isn’t working.

The error is in the normal js console, and also in the addon debug console (also ‘unknown’).

Both content scripts use code similar to that which I posted to access the prefs.

#29

image.png996×1055 152 KB

#30

Do you see that error message as well?

#31

Nope. No error and it’s working.

#32

Well that’s encouraging. I’ll try with a new installation of Firefox - tomorrow.

Thanks for your help again. You’re welcome to my place in the review queue if you need it :wink:

#33

I don’t think it works that way, but thanks anyway :D