manifest.json:
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.1",
"content_scripts": [
{
"matches": [
"https://opskins.com/*"
],
"js": ["jquery-3.2.1.min.js", "content.js"]
}
],
"browser_action": {
"default_icon": "icon.png"
}
}
content.js:
var sticker = document.body.querySelector('.sticker');
if (sticker) {
var stickerTitle = sticker.getAttribute('title');
}
console.log(stickerTitle)
https://opskins.com/?loc=shop_browse&app=730_2
works with the page. But the console response is undefined.
That's what I need:
Related
Manifest.json
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"32": "icons/32x32.png"
}
},
"content_scripts": [
{
"matches": ["*://*/*"],
"run_at": "document_start",
"js": ["content-script.js"]
}
],
"permissions": [
"scripting",
"tabs",
"notifications",
"activeTab",
"webRequest"
],
"host_permissions": ["*://*/*", "https://*/*"],
"web_accessible_resources": [
{
"matches": ["*://*/*", "http://*/*", "https://*/*"],
"resources": ["web.js"]
}
],
"icons": {
"32": "/icons/32x32.png"
}
}
content-script.js
console.log("I am content script");
function injectScript() {
var script = document.createElement("script");
script.src = chrome.runtime.getURL("scripts/web.js");
script.type = "text/javascript";
console.log("Inserting Script", document);
document.head.appendChild(script);
}
injectScript();
web.js
console.log("I am web.js");
setInterval(() => {
console.log(window.test, "Test in setInterval");
}, 1000);
console.log(window.test, "Logging test from web.js");
// document.body.style.backgroundColor = "red";
Upon refreshing the page I am getting the following error
Not able to get what could be the issue, can someone guide me?
Thank You!
I don't know where came wrong. The chrome extension keep on showing error
manifest.json
{
"name": "CatExtension",
"description": "Coding train practice-communication between background script and content script",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/cat.png"
}
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content.js"
]
}
]
}
background,js
chrome.action.onClicked.addListener(buttonClicked);
function buttonClicked(tab) {
console.log(tab);
}
It shows error
Where is the error?
My manifest file:
{
"manifest_version": 2,
"name": "myAddon",
"version": "1.0",
"description": "myAddon.",
"icons": {
"48": "icons/myAddon-48.png",
"96": "icons/myAddon-96.png"
},
"content_scripts": [
{
"matches": ["https://mytestmatchwhichworkedfine.pl/*"],
"js": ["jquery-3.3.1.min.js", "myAddon.js"]
}
],
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icons/myAddon-32.png",
"default_title": "myAddon"
}
}
myAddon.js
browser.browserAction.onClicked.addListener((tab) => {
browser.tabs.executeScript(tab.id, {
code: `document.body.style.border = "5px solid red"`
})
})
I want the script to be executed after I click the addon button. When I write document.body.style.border = "5px solid red" alone in the script - it does execute. What I did wrong?
Browser Action click listener can be set only in background script. The provided code will still be executed on page (tab), because browser.tabs.executeScript(...) executes content script.
"content_scripts": [
{
"matches": ["https://mytestmatchwhichworkedfine.pl/*"],
"js": ["jquery-3.3.1.min.js"]
}
],
"background": {
"scripts": ["myAddon.js"]
},
I want that if any of my webpage loads I want to simply display a simple alert on the page.
manifest.json
{
"manifest_version": 2,
"name": "Chrome Ext Demo",
"description": "chrome extension tuts",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://*/* "],
"js": ["jquery.js","eventPage.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/"
]
}
I have jquery stored locally in my chrome extension folder.
eventPage.js
$("document").ready(function(){
alert("hiii");
console.log("hii");
});
I am new to building Chrome Extension. Any help would be appreciated.
Please remove the useless space in your "matches": ["http://*/* "]field, it doesn't match a valid url.
If possible, remove useless permissions if they are not used.
{
"manifest_version": 2,
"name": "Chrome Ext Demo",
"description": "chrome extension tuts",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.js","eventPage.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
I am trying to learn about chrome extensions but I am not able to understand how to manipulate DOM of a page using content_scripts.
manifest.json
{
"name": "First",
"version": "1.0",
"manifest_version": 2,
"description": "First extension",
"background": {
"scripts": ["test.js"]
},
"page_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "popup1.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"permissions" : [
"tabs",
"http://*/*"
]
}
test.js
function check(tab_id, data, tab){
if(tab.url.indexOf("google") > -1){
chrome.pageAction.show(tab_id);
}
};
chrome.tabs.onUpdated.addListener(check);
popup1.js
function myfunc(){
var x = $('#options option:selected').text();
$("body").append('Test');
alert(x);
//window.close();
}
$(document).ready(function(){
$('#options').change(myfunc);
});
The above code/extension works fine because myfunc gets called but it doesn't inject Test into the body of google.com.
So, where am I going wrong in accessing/manipulating the DOM.
If you want to play with browser tab DOM on event of popup. In this case you have to pass a message to content script from background script, or inject JavaScript into content script : have a look
manifest.json
{
"name": "First",
"version": "1.0",
"manifest_version": 2,
"description": "First extension",
"background": {
"scripts": ["test.js"]
},
"page_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "content_script.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"permissions" : [
"tabs",
"http://*/*"
]
}
content_script.js
function myfunc(){
var x = $('#options option:selected').text();
$("body").append('<div style="width:200px; height:200px; border: 1px solid red;"></div>');
}
$(document).ready(myfunc);
Now you will get A box with red border at the bottom of the page.
popup.js
function myfunc(){
var x = $('#options option:selected').text();
chrome.extension.sendMessage({sel_text: x});
}
$(document).ready(function(){
$('#options').change(myfunc);
});
test.js (used in background)
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
appendTextToBody(request.sel_text);
});
function appendTextToBody(text) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, {"code" : '$("body").append("Test : "'+text+');'}) ;
});
}
function check(tab_id, data, tab){
if(tab.url.indexOf("google") > -1){
chrome.pageAction.show(tab_id);
}
};
chrome.tabs.onUpdated.addListener(check);