I am trying to make basically an element highlighter chrome extension.
Workflow:
- click on browser icon
- click on the page
- hightlight the element clicked
I am having troubles in running content scripts upon browser action using manifest_version:2
When I inspect the popup that appears it says:
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'
chrome-extension-resource:" (popup.html:5).
Which is where the inline script in popup.html is and the script does not work
I have:
manifest.json:
{
"browser_action": {
"default_icon": "images/icon.gif",
"default_popup": "popup.html"
},
"manifest_version": 2,
"description": "MEH!",
"name": "My First Extension",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"version": "0.1"
}
popup.html:
<html>
<head>
</head>
<body>
<script>
chrome.tabs.executeScript(null,{
code:"document.body.style.backgroundColor='red'"
});
</script>
<div id='msg' style="width:300px">...</div>
</body>
</html>
Any help would be very much appreciated
Turns out I could not read the error properly until I saw it in here
Apparently manifest v2 does not allow you to have inline scripts, so you just need to
src="path_to_the_file.js"
In extension to #tak3r's answer and #Doug's comment:
Inline scripts need to be changed to external scripts.
Move:
<script>
chrome.tabs.executeScript(null,{
code:"document.body.style.backgroundColor='red'"
});
</script>
To a new file called main.js and remove the <script></script> tags
Include the following in the <head></head> of your HTML
<script type="text/javascript" src="main.js"></script>
Related
Like the the 10,000 examples with the exact same heading, I am having a trouble with the development of a chrome extension, specifically the execution of scripts between my popup window and my content script.
The specific error i'm receiving is "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')".
Now, I have reviewed several dozen threads with the same issue and the common theme seems to be that the placement of the scripting within the HTML code is causing the script to execute prior to the DOM loading, however I have attempted the following to resolve placement being an issue.
I have reviewed my code and I have ensured that the script it executing directly above the tag (as to be the last item executing within the body section, and that the code also has the 'delay' flag within the script has a redundancy. I have also wrapped the code within the content script in window.onload=function() as a further redundancy, but alas, no love. I have also attempted moving the order of the code around within foreground.js, however as expected that didn't resolve the issue.
foreground.js
function calculatescript() {
console.log("This prints to the console of the page")
};
window.onload=function(){
var runcalculate = document.getElementById("runcalculate");
runcalculate.addEventListener("click", calculatescript);
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="popup.css">
<title>Example Extension</title>
</head>
<body>
<div>
<button class="button button1" id="runcalculate">Calculate</button>
</div>
<script src="foreground.js" defer></script>
</body>
</html>
manifest.js
{
"manifest_version": 3,
"name": "Example",
"description": "An example of a chrome extension using manifest v3",
"version": "0.0.1",
"icons": {
"16": "logo/logo-16.png",
"48": "logo/logo-48.png",
"128": "logo/logo-128.png"
},
"options_page": "settings/settings.html",
"action": {
"default_title": "example",
"default_popup": "popup/popup.html"
},
"permissions": [
"tabs", "scripting"
],
"host_permissions": [
"*://*/*"
],
"background": {
"service_worker": "service-worker.js"
},
"content_scripts": [{
"js": ["foreground.js"],
"matches": ["http://*/*", "https://*/*"]
}]
}
A background js scripts exist however are empty.
If I remove the attempt to pass the script and print directly to the console without trying to wrap it in a button, it works without issue.
I've exhausted my knowledge of what to do to get this working, and the ability to execute off a button is I imagine a fairly common practice, so I'm obviously doing something inherently wrong.
I am writing a chrome extension and am trying to bind an event listener to an HTML button via an external JS file.
The event listener works, however Chrome throws the following error:
This is manifest.json, background.js, and popup.html file in that order:
{
"name": "DRIP",
"version": "1.0",
"manifest_version": 2,
"description": "DRIP is an automation tool for purchasing limted items",
"permissions": ["storage", "tabs"],
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
}
}
function myAlert(){
alert('hello world')
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('alertButton').addEventListener('click', myAlert);
});
__
<html>
<head>
<title>Test</title>
</head>
<body>
<form name='testForm'>
<input type='button' id='alertButton' value='click me'>
</form>
<script language='javascript' src='background.js' defer></script>
</body>
I'm sorry if my formatting isn't great. Input is greatly appreciated!
Remove
"background": {
"scripts": ["background.js"]
}
That's for running tasks in the background and loads a background page. It is running on a blank page _generated_background_page.html (that it generated for you). Note that you can set the background page's html if you needed to.
Popup is a separate background page with the html set to the default_popup value. That is the page you get when you click the icon and get a popup.
Official docs for reference: https://developer.chrome.com/extensions/background_pages
Directories
----MyExtension
|----popup.html
|----popup.js
|----content.js
|----background.js
|----manifest.json
mainfest.json
{
"manifest_version": 2,
...........
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"browser_action": {
"default_title": "Practice",
"default_popup": "popup.html"
},
"permissions": [
"<all_urls>",
"tabs",
"storage",
"activeTab"
],
"background": {
"scripts": ["background.js"]
}
}
....
popup.html
<html>
<head>
....
<script src="popup.js"></script>
</head>
<body>
<input id="status" type="chckbox">
</body>
</html>
popup.js
$(document).ready(function(){
$on = $("#status");
//sends the settings to background to save it
$on.on("click",function(){
$obj = {"on":$on.prop("checked")}
browser.runtime.sendMessage($obj);
console.log("sending....");
})
})
What im trying to do is simply send a message to background script if the check box in popup.html is checked.
The problem is I cannot access the browser namespace in popup.js because its not content script or background script. And i cannot access the check box from the content scrip as it not linked to popup.html (if its linked i get reference error browser is not defined. I've tried countless google searches and spent hours reading web extension docs still cannot find an answer how to go around it any help appreciated.
I have good news for you - you can access the browser namespace in your browser action poupus, otherwise they would be pretty useless :)
Which means that something else is broken.
First, if you didn't do it yet, open 'browser toolbox' with Ctrl+Shift+Alt+I to see that you probably have a bit different kind of error there.
Then include this in your background.js :
function handleMessage(request, sender, sendResponse) {
console.log("Message from somewhere: ", request);
}
browser.runtime.onMessage.addListener(handleMessage);
To actually read the message.
See:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction
JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts, but its global context is the popup, not the current page displayed in the browser. To affect web pages you need to communicate with them via messages.
Edit, unrelated:
$on = $("#status");
You do realize that by doing so you refer to/create a global variable '$on', right? Did you mean:
var $on = $("#status");
?
I wanted to build a chrome extension that will update some page (from other source/page) without any popup (the question is silly as I know as I am new in extension dev)
For example, I had my manifest.json:
{......
"browser_action": {
"default_icon": "icon.png",
"default_title": "My chrome extension title"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
......
}
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({ url: "pageloader.html" });
});
pageloader.html:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#status").append("hello chrome extension");
})
</script>
<title>Page loader</title>
</head>
<body>
<div id="status">
</div>
<p>hello</p>
</body>
</html>
When I open 'pageloader.html', javascript is just running fine and showing the output in the browser like:
hello chrome extension
hello
But when I run install the extension and clicking on the 'extension' it is opening 'pageloader.html' in the new tab but showing only
hello
I mean, the javascript part is not running. I will appreciate, if someone would show me my mistake.
CSP does not allow inline javascript and loading resources like jquery from external servers. In order to make it work.
Download jquery and save it in local directory under extension folder.
Move the inline javascript in external file and then include this file after jquery.
If you want to relax the default policy : https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing
I'm new in javascript and chrome extensions (this is first application).
Extension get a QRcode of the open page's URL.
For QRcode generation I use this lib: https://github.com/jeromeetienne/jquery-qrcode
I read some quides and many answers on SO, but extension doesn't work.
All *.js libraries are in the root catalog with manifest.json
manifest.json
{
"manifest_version": 2,
"name": "QRify",
"description": "This extension shows a QR code of the open page",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"js": [
"jquery.min.js",
"jquery.qrcode.js",
"jquery.qrcode.min.js",
"qrcode.js"
]
}
],
"browser_action":{
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<title>basic example</title>
</head>
<body>
<script src="popup.js"></script>
</body>
</html>
popup.js
var pathname = window.location.pathname;
jQuery('#URLqrcodeCanvas').qrcode({
text : pathname
});
Most likely I forgot something...
There are few things which are wrong in your code. Let's take them step by step
Inclusion of both jquery.qrcode.js and jquery.qrcode.min.js : In production code, we try to use minified jquery because downloading of minified js files is faster.
No element with selector used in popup.js : You are trying to access URLqrcodeCanvas in your popup.js while no such element is present in popup.html. May be you should add this
You have not included jquery and qrcode in your popup.html : You need to understand the context of content script, popup scripts and background scripts. Read this
SO Answer: Difference between popup script, background and content script
Wrong use of window.location.pathname : May be you wanted to access the path of current active tab instead of popup. Once you understand the difference between popup and content script then you will be easily figure out this point. Read this
SO Answer: How to get url of active tab ?
Thanks to #Abraham for adding points 3 and 4 in this answer. Hope it helps!!