Chrome extension simple audio - javascript

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

Related

javascript chrome extenstion stops working after two reloads

im trying to change the color of a class on bybit exchange. the problem is that the extension stops working after reloading two times and then I have to clear my cache to get it runnig again. im pretty new to programming so yeah... :) here is the code
function btn4() {
var recent = document.getElementsByClassName("rt__head full flex");
recent[0].style.backgroundColor = "lightblue";
}
btn4();
this is my manifest file below:
"name": "Bybit orderbook color",
"version": "1.1",
"manifest_version": 2,
"content_scripts": [
{
"matches": [ "https://www.bybit.com/trade/usdt/BTCUSDT/*" ],
"run_at": "document_idle",
"js": [ "background.js" ]
}
],
"permissions": [ "activeTab" ]
}

Chrome extension - cookies.getAll returns nothing

When I run the following function I get a zero for the cookie length:
function cookieinfo() {
chrome.cookies.getAll({}, function(cookie) {
console.log(cookie.length);
allCookieInfo = "";
for (i = 0; i < cookie.length; i++) {
console.log(JSON.stringify(cookie[i]));
allCookieInfo = allCookieInfo + JSON.stringify(cookie[i]);
}
localStorage.allCookieInfo = allCookieInfo;
});
It should be finding all the cookies the user has but I'm getting nothing.
Use: I'm creating a chrome extension that creates a new tab for the user. I'm trying to recreate chromes new tab look and how they display the pages the users already visited.
Here is the manifest.json:
{
"manifest_version": 2,
"name": "-------",
"version": "0.1",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": ["jquery-3.2.1.min.js", "content.js"]
}],
"permissions": ["tabs", "cookies"],
"chrome_url_overrides": {
"newtab": "NewTab.html"
}
}
According to chrome dev docs, "To use the cookies API, you must declare the "cookies" permission in your manifest, along with host permissions for any hosts whose cookies you want to access."
So you need to add "host permissions" in manifest.json like this example

document.addEventListener not working in Chrome Extension

I'm trying to create a chrome extension which simply alerts "Foo" whenever a new DOM node is inserted during a page load. The following code does not work:
manifest.json:
{
"name": "test",
"description": "test",
"version": "2.0",
"manifest_version": 1,
"permissions": [
"activeTab"
],
"content_scripts": [
{
"run_at": "document_start",
"matches": ["https://www.facebook.com/*"],
"js": ["test.js"]
}]
}
test.js:
function nodeInsertedCallback(event) {
alert("Foo");
});
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);
When test.js is simply:
alert("Foo");
The alert is shown, indicating it's not an issue with the manifest or with the extension itself.
There is a syntax error on the third line. But I also suggest wrapping your code into an IFFE. Giving you an end result like:
(function() {
function nodeInsertedCallback(event) {
alert("Foo");
});
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);
}).call(this)

Selectively include javascript file dependent on website

I'm trying to build a Chrome Extension that will work with two websites, we'll call them website1.com and website2.com. Depending on what website we are on I would like to include a different JS file that will store all the logic (In this example I have called it code-for-website-1.js (there would also be another JS for website2.com).
I'm having a problem figuring out how I can only include code-for-website-1.js when I am on website1.com and code-for-website-2.js when I am on code-for-website-2.js.
Here is my manifest:
{
"name": "My Chrome Extension",
"version": "1.0",
"description": "Extension description",
"manifest_version": 2,
"permissions": ["tabs", "http://www.website1.com", "http://www.website2.com"],
"content_scripts": [
{
"matches": ["http://www.website1.com"],
"js": ["jquery.js", "code-for-website-1.js"]
}
]
}
I tried to use one controller.js that would use the following command:
if (onWebsite1 == true){
chrome.tabs.executeScript(null, { file: "code-for-website-1.js" });
} else {
chrome.tabs.executeScript(null, { file: "code-for-website-2.js" });
}
With this I just get the error:
Uncaught TypeError: Cannot call method 'executeScript' of undefined
in the manifest according to the documentation you can add multiple objects to the content_script array
example
"content_scripts": [
{
"matches": ["http://www.website1.com/*"],
"js": ["script_for_website1.js"]
},
{
"matches":["http://www.website2.com/*"],
"js":["script_for_website2.js"]
}
]

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.

Categories

Resources