I've been looking everywhere for an answer to what seems like a simple problem but can't find anything that works. Making a chrome extension and all I want it to do right now is display how many DOM items are listed on the current page.
masnifest.json:
{
"manifest_version": 3,
"name": "Tag Manager",
"description": "",
"version": "1.0",
"permissions": ["scripting",
"tabs",
"notifications"],
"host_permissions": ["https://*/*"],
"action": {
"default_popup": "popup.html"
}
}
popup.html:
<html>
<head>
<title></title>
</head>
<body>
<script src='popup.js'></script>
</body>
</html>
popup.js:
function hello() {
var name = document.getElementsByClassName('wd-tag-row').length;
alert("Tags " +name);
}
hello();
When I run the popup.js script from the developer console on the page I'm testing it works. An alert pops up that says "Tags: 9" but whenever I run the extension it says "Tags: 0" and I can't figure out why.
Any help would be appreciated, thank you!
Tried moving around where the script is called on, and tried making it run when the page is finished loading.
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
I am attempting to make a chrome extension that creates a new tab with a local 'blanksite.html' and injects some javascript code turning it green. Here's what I have so far.
background.js
chrome.browserAction.onClicked.addListener(function(activeTab){
chrome.tabs.create({'url': chrome.extension.getURL("blanksite.html") }, function(tab) {
chrome.tabs.executeScript(tab.id, {
code: 'document.body.style.backgroundColor="green"'
});
});
});
manifest.json
{
"manifest_version": 2,
"name": "Open Green Google Tab",
"description": "This extension opens a Green Google tab.",
"version": "1.0",
"background":{
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs",
"activeTab"
]
}
This opens "blanksite.html" (literally an empty html file) in a new tab, but does not turn the tab green.
I've read the other answers at Chrome extension: create tab then inject content script into it, so I know why this doesn't work (not able to directly inject code into chrome://extension pages); but I wasn't able to make the solutions posted on the other answers work for me. Is there a clear, full piece of small code that can make what I want to do work?
I'm afraid I do not understand messaging very well, so for any solution that has that as a piece, a more comprehensive explanation would be greatly appreciated.
Not sure why starting message passing from background page to blanksite.html won't succeed (maybe it's too late to listen to message in blanksite.html when it's created?).
However, starting message passing from blanksite.html and executing corresponding action in the response work well, see following sample code:
blanksite.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="blanksite.js"></script>
</body>
</html>
blanksite.js
chrome.runtime.sendMessage({src: "newtab"}, function(response) {
if(response.action === 'changeColor') {
document.body.style.backgroundColor = 'green';
}
});
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
chrome.tabs.create({url: chrome.runtime.getURL('newtab.html')});
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.src === 'blanksite') {
sendResponse({action: 'changeColor'});
}
});
I am making an extension for Google Chrome which uses the Downloads API.
I want to download a .jpg file from a website.
I have used these permissions in the manifest:
"permissions": ["downloads", "*://www.thatsite.com/*"]
and the command i am using is:
chrome.downloads.download({"url":"https://www.thatsite.com/images/image1.jpg"});
This gives the following error
"Error during downloads.download: Invalid URL."
Any ideas how to solve this??
I tried with following code, and it is working as expected. I hope you are not on Stable Channel.
Put your complete code, the problem is entirely with URL.
You can refer following code as a reference
Reference
manifest.json
Registered browser action and permissions with manifest file.
{
"name": "Download Demo",
"description": "http://stackoverflow.com/questions/14560465/chrome-downloads-download-gives-error-during-downloads-download-invalid-url",
"manifest_version": 2,
"version": "1",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"downloads",
"*://www.google.co.in/*"
]
}
popup.html
Added <script> file to comply with CSP.
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<button id="download">Download</button>
</body>
</html>
popup.js
Simply passed URL to download API.
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("download").addEventListener("click", function () {
chrome.downloads.download({
"url": "http://www.google.co.in/images/srpr/logo3w.png"
}, function () {
console.log("downloaded");
});
});
});
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>