WebExtensions and page scripts

Add-ons Development
#1

WebExtensions are an excellent announcement, it is probably going to simplify the life of many developpers. Thanks a lot for that.

However, in my case, there is two major difficulties to port my Chrome extension:

  • we are loading scripts from a page script and pages script cannot access the Firefox API (simple storage to be precise). In Chrome, it is possible to access the browser storage from a content script and more important: from the page script.

  • page scripts are not affected by the cross-domain permissions in package.json. In Chrome, if you set a permission, then content scripts and page scripts are able to make cross-domain requests.

Are WebExtensions going to help with those issues ?

#2

I assume by “page scripts” you mean web pages that are shipped as part of the extension and have access to chrome.* APIs. If that’s not what you mean, then my answer below doesn’t apply :-).

If I understand, you’re asking whether chrome.storage will work from content or page scripts? In our implementation right now, you can use the storage.* API from page scripts, but not yet from content scripts. However, we’ll definitely add support for that. I just filed bug 1197346 for it.

Yes, the cross-domain permissions in manifest.json apply to all code that’s part of the extension, including content scripts and page scripts.

1 Like
#3

Perfect answer, I will follow the bug 1197346 with attention.

I thought Page script was an official term.

#4

I currently just porting a Chrome Extension to WebExtensions and this is not working in Firefox. In Chrome its working like charm but in FF I always getting the Cross-Origin Request Blocked error.

Could not find any additional information if here a known bug is present.

#5

You’ll need to be more specific. Which API are you using? Do you know what code is causing the error?

#6

Thanks Jorgev for getting back to me, here some code:

mainfest.json

{
    "manifest_version": 2,
    "name": "Test Extension",
    "version": "1.0",
    "description": "Test Extension",
    "permissions": [
        "*://en.wikipedia.org/*"
    ],
    "applications": {
        "gecko": {
            "id": "borderify@mozilla.org",
            "strict_min_version": "45.0.0"
        }
    },
    "content_scripts": [
        {
            "matches": [
                "*://duckduckgo.com/*"
            ],
            "js": [
                "jquery.js",
                "content.js"
            ],
            "run_at": "document_start"
        }
    ]
}

content.js

jQuery(document).ready(function() {
    $.ajax({
        url: 'https://en.wikipedia.org/wiki/SMS_language',
        crossDomain: true,
        dataType: 'html',
        success: function(data, status, xhr) {
            console.log(xhr);
        }
    });
});

On chrome it is working without a problem since I gave the permission to access en.wikipedia.org but on Firefox I get the following status:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/wiki/SMS_language. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

According to https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Cross-domain_privileges that should work isn’t it?

#7

It could be that Duckduckgo has set CSP restrictions that are causing this error. It sounds like this bug, which hasn’t been fixed yet.

#8

I am not sure its related to that bug, duckduckgo was just as example and with other sides I am facing the same issue. So to me it does not seems to be page related.

Normally that should as I try or?

#9

Many different sites have CSP protections now, so it could still be that problem. As a workaround, you can do the requests from the background script and communicate the results to the content script.