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.
Related
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" ]
}
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!
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)
I am trying to use JQuery in my content script but The chrome console spits this out "Uncaught ReferenceError: $ is not defined ". I can successfully use JQuery in my background script so I'm not exactly sure whats up.
Here's the manifest file:
{
"name": "Something",
"version": "1.0",
"description": "SOmething",
"background": {
"scripts": ["background.js", "jquery.js"],
"persistent": true
},
"browser_action": {
"default_icon": "favicon.png",
"default_popup": "popup.html"
},
"permissions": [
"declarativeContent",
"http://localhost/",
"http://*/*",
"https://localhost/",
"https://*/*",
"tabs"
],
"icons": {
"48": "icon-48p.png"
},
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js", "jquery.js"]
}],
"web_accessible_resources": ["button.PNG", "jquery.js"],
"manifest_version": 2
}
Here's the content script:
var btn = document.createElement("input");
btn.id = "btn";
btn.type = "image";
btn.setAttribute("src", chrome.extension.getURL("button.PNG"));
btn.onclick = function() {
alert("Currently under development");
};
btn.className = "";
if (window.location.href.indexOf("mysite") > -1) {
$('#pageContainer').append('<ol><li>CATS</li><ol>'); //Fails here
}
if (window.location.href.indexOf("myother") > -1) {
document.getElementById("maindiv").appendChild(btn); //works
}
Edit: JQuery is in the project and it does work in background.js. The question is how do I get it working within my content script? I've specified in the manifest that I want jquery injected along with content.js.
Make jQuery the first content script listed in thecontent_scripts -> js array. Like:
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["jquery.js", "content.js"]
}],
Your content script is trying to access jquery before it's loaded. The way your manifest is set up now, jQuery still should be loaded however. To verify this, type something like window.jQuery into the console on the content script page and make sure that it is defined.
As berrberr pointed out, you have to load jquery before your content.js script as follows
"js": ["jquery.js","content.js"]
or you can achieve the same in Pure JS using appendChild().
Also a note: If you are manipulating DOM elements, try injecting your script at document_end
I have a context menu option and when it is selected I want insert some HTML. I have tried doing this
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText='test123';
But it's not working for me.
Note I am trying to avoid using jQuery.
Here you can research how to create an extension and download the sample manifest.json.
Content Scripts can be used to run js/css matching certain urls.
manifest.json
{
"name": "Append Test Text",
"description": "Add test123 to body",
"version": "1.0",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["content-script.js"]
}
],
"browser_action": {
"default_title": "Append Test Text"
},
"manifest_version": 2
}
content-script.js
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";
The above will execute the content-script.js for all urls matching http://*/* where * is a wildcard. so basically all http pages.
Content scripts have many properties which can be found in the link above.
Programmatic injection can be used when js/css shouldn't be injected into every page that matches the pattern.
Below shows how to execute the js onclick of the extension icon:-
manifest.json
{
"name": "Append Test Text",
"description": "Add test123 to body",
"version": "1.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Append Test Text"
},
"manifest_version": 1
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'var div=document.createElement("div"); document.body.appendChild(div); div.innerText="test123";'
});
});
This uses the executeScript method, which also has an option to call a separate file like so:-
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file: "insert.js"
});
});
insert.js
var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";