Develop Reference

I want to reflect multiple content files on a particular site, but only one of them is reflected

"manifest_version": 3,
"content_scripts": [
{
"matches": [
"https://www.test.com/*"
],
"js": [
"test-1.js"
]
},
{
"matches": [
"https://www.test.com/*"
],
"js": [
"test-2.js"
]
}
],
For example, if I set up a manifest as shown above, the JS file for test-1 is not reflected, but only the JS file for test-2 is reflected.
Is there any way to reflect both somehow?
Thank you in advance for your cooperation.

How do I add an element?

I'm creating extensions.
As a test, I want to add a button to YouTube.
I would like to add a button like the red frame on the left side of the button to rate and share the video as shown in the following image.
enter image description here
But I can't add it.
Here are the manifest.json .
{
"name": "test_extension",
"version": "1",
"manifest_version": 2,
"permissions": [
"tabs",
"storage",
"<all_urls>",
"input"
],
"content_scripts": [
{
"matches": ["https://www.youtube.com/*"],
"js": ["script/jquery-3.5.1.min.js","script/make-stamp.js"],
"all_frames": true
}
],
"icons": {
"48": "icon/48.png"
}
}
The script you want to run is here.
console.log("test extension : Start");
$("#container > #info > #menu-container").before("<div><button id=\"stamp-button\"></button></div>");
console.log("test extension : make element?");
The chrome console also shows test extension: Start and test extension: make element.

Chrome extension simple audio

I would like to play a simple "alarm" in chrome extension but i have and error in console: "GET chrome-extension://invalid/ net::ERR_FAILED chrome-extension://invalid/:1"
My simple code is:
var asdasd = '<span id="audio"></span>';
$('body').append(asdasd);
var srcaudio = chrome.extension.getURL('alert2.mp3');
$('#audio').html('<audio autoplay><source src="'+srcaudio+'"></audio>');
And my manifest is:
{
"manifest_version": 2,
"name": "test",
"description": "test",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery.js","myscript.js"]
}
]
}

So i tried to do this in my own extension.
As wOxxOm said, you probably need web_asseible_resources. For me the css/js/fonts are in the assets package. I dunno where you placed it.
"web_accessible_resources": [
"assets/css/*",
"assets/js/*",
"assets/fonts/*"
]
Secondly, extension.getUrl() is deprecated, so use runtime.getUrl() instead, as for the url try to use "./alert2.mp3" or "~/alert2.mp3" if the direct path isn't working

Chrome Extension Icon Toggle Only Updates Once

I have a toggling function, in background.js: every time a user clicks the icon, if the extension was turned off, it is turned on, and if extension was turned on, is now off, and the icon swaps to reveal which of those states it's in. "image1" revealing that it's turned off and "image2" revealing it's turned on. However, the function only updates icon URL once when clicked, despite the fact that it continually fires from "onclicked" event as evidenced by chrome dev console. Any ideas?
Here is what's in background.js:
var off = true;
function updateIcon() {
if (off == true) {
off = false;
chrome.browserAction.setIcon({path:"image1.png"});
console.log(off);
}
else {
off = true;
chrome.browserAction.setIcon({path:"image2.png"});
console.log(off);
}
return;
}
chrome.browserAction.onClicked.addListener(updateIcon);
updateIcon();
And my manifest.json file:
{
"background": {
"scripts": [ "jquery-3.1.1.min.js", "background.js" ]
},
"browser_action": {
"default_icon": "image1.png"
},
"content_scripts": [ {
"css": [ "style.css" ],
"js": [ "jquery-3.1.1.min.js", "content.js"],
"matches": [ "https://www.facebook.com/*", "http://www.facebook.com/*", "http://facebook.com/*", "https://facebook.com/*"],
"all_frames" : true,
"run_at" : "document_start"
} ],
"icons" : {
"64" : "image1.png",
"64" : "image2.png"
},
"description": "Blah blah blah",
"manifest_version": 2,
"name": "Working Title",
"permissions": [ "activeTab", "https://www.facebook.com/*", "http://www.facebook.com/*" ],
"update_url": "https://clients2.google.com/service/update2/crx",
"version": "1.0",
"web_accessible_resources": [ "images/*.png" ]
}

I don't know if there is something wrong with your browser or your computer, but I tested all the code onto different files and it seems to work fine. Unless there is anything clashing with the background.js from the content.js, it isn't the code that's the problem.

Icons were not the proper size of 128 x 128. Working now. Thx!

How to track page change (Chrome Context Script plugin)?

I'm writing a simple Chrome plugin that's intended to delete DOM elements from some site.
manifest.json
{
"name": "bla",
"version": "1.0",
"description": "bla",
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["myscript.js"]
}
],
"permissions": [
"tabs",
"http://*/*"
]
}
myscript.js
window.onload = start;
function start()
{
var ads = document.getElementById("left_ads");
ads.parentNode.removeChild(ads);
alert("bla");
}
When I load a target page everything works perfectly: div id="left_ads" is removed as intended. But, when I click a link to a page which also has a similar div id="left_ads" my script fails to work. I know that probably I should choose some other event, not window.onload(), but which one?

It turns out I've found a solution to this. I used background html file.
So, the plugin now looks like this:
manifest.json:
{
"name": "bla",
"version": "1.0",
"description": "bla",
"background_page": "background.html",
"permissions": [
"tabs",
"http://*/*"
]
}
background.html:
<html>
<script>
chrome.tabs.onUpdated.addListener(start);
function start(tabID, changeInfo, tab)
{
chrome.tabs.executeScript(null, { file: "myscript.js" })
}
</script>
</html>
myscript.js:
var ads = document.getElementById("left_ads");
ads.parentNode.removeChild(ads);
Works OK, on every page.