4

I am just starting to learn how to create my own addon in firefox. I'm using webExtensions, although I'm finding it hard to get comprehensive documentation (I think because it's still a new implementation?). The code all seems to work fine, and it completes an 'onExecuted' function after the executeScript call. But my injected script (output.js) doesn't seem to fire. After running the code I get the following error in the javascript console: "No matching message handler". I wasn't sure whether the injected script is supposed to be a self contained js file, or if it is just a collection of js commands. I tried the latter too (just a simple message box), and that didn't work either.

My code: manifest.json:

{
    "manifest_version": 2,
    "name": "ExportTabs",
    "version": "0.9",

    "description": "Export/Import Tabs",
    "icons": {
        "48": "icons/export48.png"
    },

    "permissions": [
        "tabs",
        "activeTab",
        "<all_urls>"
    ],

    "applications": {
        "gecko": {
            "id": "[email protected]"
        }
    },

    "browser_action": {
        "default_icon": "icons/export.png",
        "default_popup": "popup/popup.html" 
    }
}

My popup.html when the addon button is pressed:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div>
        <button onclick="save()">Save Tabs</button>
        <button onclick="view()">View Tabs</button>
    </div>

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

</html>

The popup.js file:

function save() {
    chrome.tabs.create({"url": chrome.extension.getURL("popup/output.html")}, onCreated);
}

function onCreated(newTab) {
    chrome.tabs.executeScript(newTab.id, {
        file: "popup/output.js",
        allFrames: true
    }, onExecuted);
}

function onExecuted(result) {
  alert("inside onExecuted");
}

ouput.html for the newly created tab:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div>testing stuff</div>
    <div id="output"></div>

  </body>

</html>

output.js for the above page:

//output.js
(function() {
    alert("inside output.js");
})();

I should add that I've got noscript addon, so have tried this with "allow scripts globally" and it still gives the same error. Cheers for any help.

edit: I tried replacing the file: "popup/output.js", in the executeScript method with code: 'alert("hello");', and it still didn't work.

Information moved from Answer posted by OP:
Bump. I tried this code out on another box with ff50.something (beta channel), and the injection doesn't even make 'onExecuted'. But it doesn't throw any errors. Basically the popup works, and then nothing happens after that.

Improve this question
0

1 Answer 1

Reset to default
9

Individual problem analysis

Problem "No matching message handler"

That the message "No matching message handler" is shown is a known bug in Firefox versions prior to 49. The bug is documented as Bug 1254003.

Problem "executeScript does not inject script"

In versions 49+, it still doesn't work because of this documented restriction:

You can only inject code into pages whose URL can be expressed using a match pattern: meaning, its scheme must be one of "http", "https", "file", "ftp". This means that you can't inject code into any of the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab.

So, you cannot use tabs.executeScript() to inject scripts into content loaded from your own extensions. The example works when I replace loading a page from the extension with loading a page from the web:

function save() 
{
    chrome.tabs.create({"url": "https://en.wikipedia.org/wiki/Bacon"}, onCreated);
}

When you want to execute code in the page loaded from your extension, execute the JavaScript directly by loading a script file in your content page

If you need to pass parameters to the script inside the loaded content page, you can send messages between the script that opens the tab and the script inside the opened tab.

See chapter "Communicating with background scripts" on Content Scripts documentation. While the documentation is specifically about "content_scripts" from the manifest file, the explanation about communication also applies in your situation.

Sample code:

Function Save in popup.js.

function onCreated(newTab) 
{
    // Use setTimeOut to give the loaded page some time to register the message listener
    setTimeout(onCreatedInner, 500);
    function onCreatedInner()
    {   
        console.log("oncreated " +   " " +  newTab.id);
        chrome.runtime.sendMessage(42);
    }
}

output.js:

chrome.runtime.onMessage.addListener(notify);

function notify(message) 
{
    window.alert(message);
    
}

Problem "JavaScript code in popup is not executed"

On your friend's setup you run into a different problem: By default, you are not allowed to use inline scripts in content pages in web extensions in Firefox. You should see that in the browser console you get the error

Content Security Policy: The page's settings blocked the loading of a resource at self

So, instead of using an inline "onclick" with the save button, assign the onclick event dynamically from your JavaScript script. How to change the popup.html:

<button onclick="save" id="buttonSave">Save Tabs</button>
<button >View Tabs</button>

Code to add at the beginning of popup.js:

var elem = document.getElementById("buttonSave");
elem.onclick  = save;

Full working example

Here is the full minimal sample code that works as expected:

File manifest.json

{
    "manifest_version": 2,
    "name": "ExportTabs",
    "version": "0.9",

    "description": "Export/Import Tabs",
    "icons": {
        "48": "icons/export48.png"
    },

    
    "permissions": [
        "tabs",
        "activeTab",
        "<all_urls>"
    ],

    "applications": {
        "gecko": {
            "id": "[email protected]"
        }
    },

    "browser_action": {
        "default_icon": "icons/export.png",
        "default_popup": "popup/popup.html" 
    }
}

File popup.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div>
        <button onclick="save" id="buttonSave">Save Tabs</button>
        <button >View Tabs</button>
    </div>

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

</html>

File popup.js

// Register onclick-Event for Save Button
var elem = document.getElementById("buttonSave");
elem.onclick  = save;

function save() 
{
     chrome.tabs.create({"url": chrome.extension.getURL("popup/output.html")}, onCreated);
}

function onCreated(newTab) 
{
    // Use setTimeOut to give the loaded page some time to register the message listener
    setTimeout(onCreatedInner, 500);
    function onCreatedInner()
    {   
        chrome.runtime.sendMessage(42);
    }
}

File output.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div>testing stuff</div>
    <div id="output"></div>

  </body>
  <script src="output.js"></script>

</html>

File output.js

// register message handler
chrome.runtime.onMessage.addListener(notify);

function notify(message) 
{
    // Write message into page 
    var elem = document.getElementById("output");
    elem.innerText  = message;
    
    // Show alert
    window.alert(message);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks Nine. Few problems. FF50 won't even create a new tab, let alone load anything into it. I used the following for popup.js: codefunction save() { chrome.tabs.create({"url": "en.wikipedia.org/wiki/Bacon"}); } The other problem is that as far as I can see you can only communicate between a content_script and a background script, not a script loaded with via the output.html code. But I can't load a content script as it only accepts the limited match patterns that you stated. My output.html is a local file. Is there a simple way to host it somewhere to load via http?
nb: in the above it added a non-existent semi-colon for some reason. The code is: chrome.tabs.create({"url": "en.wikipedia.org/wiki/Bacon"}); edit: I give up. It added it here too. ignore the semi-colon after bacon". It's also hyperlinked it and removed the h t t p etc.
@erv I have updated the answer with more details. Please be more specific with problems you have. Always check for errors or warning in the browser console.
@erv If you have more details on a question, update the question instead of adding comments. There, you also have full support to format source code. In comments you can use a backtick ` to mark source code.
Cheers, Nine, that works on ff50 now. You were right about the Content Security Error. I missed it as I was only looking at the javascript errors on the console.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.