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?
Found a satisfying solution from the same tutorial.
var browser = require("webextension-polyfill");
This works for me!
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
Related
I'm trying to create a chrome extension, so I'm doing tutorials to learn and reading a bunch, but I'm struggling. I'm doing this tutorial. But long-term, from the extension I need users to be able to login to their account, then as they're browsing, send the url that they're at to their account.
popup.html
<!doctype html>
<html>
<head>
<title>Add a Snippet</title>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<h1>Add a Snippet</h1>
<form id="form">
<textarea id="code"></textarea>
<button type="submit" id="checkPage">Add Snippet</button>
</form>
</body>
</html>
popup.js
What I REALLY don't understand is that according to the console.log lines that I have in there and the error, it's loading the DOMContent, and it doesn't have any problem with finding the form by the id (let f = document.getElementById('form');). But it bombs when I try to attach an event listener?
document.addEventListener('DOMContentLoaded', function() {
console.log('the domcontentloaded');
let f = document.getElementById('form');
f.addEventListener('submit', function(e){
console.log('the form was submitted');
e.preventDefault();
})
}, false);
manifest.json
{
"name": "My Awesome Plugin",
"description": "This extension will be awesome",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "This is Awesome"
},
"background": {
"scripts": ["jquery-2.2.3.min.js", "background.js","popup.js"],
"persistent": false
},
"permissions": [
"activeTab",
"declarativeContent",
"https://ajax.googleapis.com/",
"storage",
"tabs",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["login.js"]
}
],
"manifest_version": 2
}
login.js
console.log('login.js is ready to party');
When I load, I get this in the background inspector (or whatever it's called). So it's not finding the form.
So I looked at the elements, and I'm confused because it's not showing the form or the textarea. But when I click on the chrome extension icon, it's there.
1/Remove popup.js from "background/scripts" section of your manifest.
2/Add popup.js as a script reference in your popup.html file.
This way, popup.js will operate in the context of the popup.html DOM.
I would like to create a chrome extension that open my website on homepage / new tab. I used the HTML tag <meta http-equiv.. to redirect the user to my website and it working great.
The problem is that I want to pass parameter (create unique ID for each user) and to attach this parameter to my website URL:
for example: http://www.mywebsite.com/?user_id=parameter_value_here
where I should create my user id?
how I pass it to the new tab html file?
My extension code:
newTab.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=http://www.mywebsite.com/?user_id=value_here" />
</head>
<body style="display: none;">
</body>
</html>
Manifest
{
"name": "My website name",
"version": "1.1",
"description": "website description goes here",
"chrome_url_overrides" : {
"newtab": "newTab.html"
},
"permissions": [
"topSites",
"chrome://favicon/"
],
"manifest_version": 2,
"permissions":[
"http://*/*",
"https://*/*",
"management",
"storage",
"tabs",
"webRequest",
"webRequestBlocking",
"cookies",
"bookmarks"
]
}
I'm working on building a Chrome extension for a forum, but the problem is the JavaScript for my popup.html won't do anything. I added alert("popup.js running...") at the top and it does come up but then my popup doesn't display at all. This is a problem because JavaScript is going to be required for the popup page. I'm kind of lost, so I'm assuming I'm just missing something that is preventing my JavaScript from running. I heard the AdBlock extension would prevent it from running but I removed that and it still didn't work. Anyone see a problem?
manifest.json
{
"name": "Riggy",
"short_name": "Riggy",
"description": "Create your own Roblox Forum signature with Riggy!",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup/popup.html"
},
"permissions": [
"storage"
],
"content_scripts": [
{
"matches": ["http://www.roblox.com/*"],
"js": ["scripts/jquery.js", "scripts/content.js"]
}
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<span class="title">Riggy</span><br />
<span>Signature: </span><input name="siggy" id="siggy" value="Riggy is greatness!" />
<span id="output">[output]</span>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
alert("popup.js running");
$(document).on("ready", function() {
var siggy = $("#siggy");
var output = $("#output");
function message(text) {
output.html(text);
}
siggy.change(function() {
chrome.storage.sync.set({"siggy": siggy.val()}, function() {
message("Saved signature.");
});
});
message("Riggy is ready!");
});
I had the same exact problem with an extension of mine, I believe it was fixed after I added this to the manifest file.
manifest.json
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
More info here: http://developer.chrome.com/extensions/contentSecurityPolicy.html.
I am currently writing a chrome extension. This is the manifest:
{
"manifest_version": 2,
"name": "whatever",
"short_name": "whocares",
"description": "blabla",
"version": "1.0.2",
"author": "me",
"permissions": [
"http://ajax.googleapis.com/"
],
"content_scripts": [
{
"matches": ["https://plus.google.com/*"],
"js": ["jquery-1.10.2.min.js","filter.js","settings.js","settings.html"]
}
],
"options_page": "settings.html",
"browser_action": {
"default_icon": "nicepic.png"
}
}
This is the options.html page:
<html>
<head>
<script type="text/javascript" src="settings.js"></script>
</head>
<body onload="CollectSettings()">
<h2>Options:</h2>
<form>
(some stuff)
</form>
</body>
</html>
The following error is thrown:
Refused to execute inline event handler because it violates the
following Content Security Policy directive: "script-src 'self'
chrome-extension-resource:".
CollectSettings() is a function within the settings.js
I thought there are only JS-Limitations of that kind in background - Scripts, not on the options-Page?
The Chrome Extensions Content Security Policy (CSP), which among other things prevents the execution of inline JavaScript, applies to the background-page and all views of an extension (including any popup's).
In fact, the example used in the section Inline JavaScript will not be executed is a typical case where those restrictions are effective on a browser-action popup.
Thanks for taking the time to read this.
Here is the directory of my extension folder.
And here is the manifest code :
{
"manifest_version": 2,
"name": "Technobuffalo Stories",
"description": "Your Description about Extension goes here",
"version": "1.0",
"content_scripts": [ {
"js": [ "popup.js" ],
"matches": [ "http://feeds.feedburner.com/*" ]
} ],
"permissions": [ "http://feeds.feedburner.com/*" ],
"browser_action": {
"default_icon": "icon_16.jpeg",
"default_popup": "popup.html"
}
}
Here is popup.html :
<html>
<head>
<title>Technobuffalo Stories
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="feed" style="background-color:orange;height:500px;width:500px;" ></div>
</body>
</html>
and last of all here is popup.js :
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://feeds.feedburner.com/technobuffalo/rss?format=xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
When I open the popup.html file as it is, the required result is displayed but when I load the Chrome extension, only the background color of the div can be seen. Is there any problem with the permissions that I have set or is it something else?
Thanks,
Yash.
You have to add the following line to manifest.json to be able to use resources from www.google.com:
"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'"
As Rob W already pointed out this is a security feature that has been introduced with manifest version 2.