4

I was trying out this webextension-polyfill example to executeScript using tabs.executeScript and I get an error message: Uncaught(in promise) Failed to load file: "browser-polyfill.js"

This is the example code I am referring to:
browser.tabs.executeScript({file: "browser-polyfill.js"}); https://github.com/mozilla/webextension-polyfill

The same goes for the other example where I try to use browser-polyfill in the content script like:

"content_scripts": [{
// ...
"js": [
  "browser-polyfill.js",
  "content.js"
]
}]

I get the error message: Could not load javascript "browser-polyfill.js" for content script. Could not load manifest

It works in background script though and also in popup html.

Here is my manifest file

{
  "name": "Dummy",
  "author": "UI Team at Dummy",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Vera browser extension",
  "permissions": [
    "storage",
    "webRequest",
    "tabs",
    "webRequestBlocking",
    "storage",
    "*://*/*",
    "declarativeContent"
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/extension_icon16.png",
      "32": "images/extension_icon32.png"
    }
  },
  "background": {
    "scripts": ["background-proprietary.js", "background.js"]
  },
  "content_scripts": [

    {
      "matches": ["https://*.box.com/*"],
      "js": ["content-script-box.js"],
      "all_frames": true
    },
    {
      "matches": ["https://*/*"],
      "include_globs": ["*DummyExtensionFlow=1*"],
      "js": ["browser-polyfill.js","config-sharepoint.js"],
      "all_frames": true
    }
  ],
  "icons": {
    "16": "images/extension_icon16.png",
    "32": "images/extension_icon32.png",
    "48": "images/extension_icon48.png",
    "128": "images/extension_icon128.png"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

Here is my popup html file which is working with webextension polyfill

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./popup.css">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script type="application/javascript" src="browser-polyfill.js"></script>
  <script type="text/javascript" src="./popup.js"></script>
</body>
</html>

What am I doing wrong?

viraj nilakh
  • 73
  • 1
  • 1
  • 6
  • 1
    Sounds like the file path may be wrong. For the first error, could be also due to the active tab not being an http/https site. Can't say more without seeing a demo extension myself. – wOxxOm Feb 16 '19 at 04:32
  • The file path is the same as that used in the example in this link https://github.com/mozilla/webextension-polyfill . Yes, the activeTab is https. Also the example works for the background script and popup. It only doesnt work for content script and tabs.executeScript. – viraj nilakh Feb 16 '19 at 22:12
  • Try re-downloading the file again from the official distro. BTW you can use browser-polyfill.min.js – wOxxOm Feb 17 '19 at 14:17
  • I dont want to download it.. I am using it as npm package.. Anyways I found a solution.. That is using webpack – viraj nilakh Feb 22 '19 at 23:13

2 Answers2

0

Found a satisfying solution from the same tutorial.

var browser = require("webextension-polyfill");

This works for me!

viraj nilakh
  • 73
  • 1
  • 1
  • 6
0

The document said that after you've installed the package by npm install --save-dev, You will find that file at node_modules/webextension-polyfill/dist/browser-polyfill.js. All you have to do is copy that file to your project directory.

You can also use the minified version for better load speed

webextension-polyfill

ThogTq
  • 11
  • 2