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?
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 am trying to create a simple firefox addon that will modify page after XHR requests on pages. Unfortunately, after loading script, it shows error on about:debugging "Reading manifest: Error processing content_script: An unexpected property was found in the WebExtension manifest." It seems the content script then is not working at all.
Tried to change matches property to and inside content_scripts but it didn't work
{
"manifest_version": 2,
"name": "Some Name",
"version": "0.01a",
"applications": {
"gecko": {
"id": "some id"
}
},
"description": "Some Description",
"author": "Some Author",
"icons": {
"48": "icon.png",
"96": "icon.png"
},
"background": {
"scripts": ["jquery.min.js","declarations.js","bg.js"]
},
"content_script": [
{
"matches": ["*://somewebsite/folder/*"],
"js": ["jquery.min.js", "content.js"]
}
],
"permissions": [
"storage",
"*://somewebsite/folder/*",
"webRequest",
"webRequestBlocking"
]
}
What is wrong with the manifest.json? Where is error?
BTW, content.js:
console.log("CONTENT_SCRIPT");
function someFunction(request, sender, sendresponse) { somecode... }
browser.runtime.onMessage.addListener(someFunction);
The first is console.log and it doesn't show CONTENT_SCRIPT neither on debugging console nor the web console.
bg.js:
browser.runtime.sendMessage({
action: "timetodo",
result: requestDetails
});
The problem is that "content_script" key should be "content_scripts" (as it written in the documentation).
So use:
{
"manifest_version": 2,
"name": "Some Name",
"version": "0.01a",
"applications": {
"gecko": {
"id": "some id"
}
},
"description": "Some Description",
"author": "Some Author",
"icons": {
"48": "icon.png",
"96": "icon.png"
},
"background": {
"scripts": ["jquery.min.js","declarations.js","bg.js"]
},
"content_scripts": [
{
"matches": ["*://somewebsite/folder/*"],
"js": ["jquery.min.js", "content.js"]
}
],
"permissions": [
"storage",
"*://somewebsite/folder/*",
"webRequest",
"webRequestBlocking"
]
}
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:
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 have made one chrome extension and below is my manifiest.json file
{
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "Example",
"version": "1.0",
"manifest_version": 2,
"description": "Example Dictionary",
"browser_action": {
"default_icon": "16x16.png",
"icons": ["128x128.png"],
"default_title": "Dictionary",
"default_popup": "index.html"
},
"icons": {
"16" : "16x16.png",
"48" : "48x48.png",
"128": "128x128.png" },
"content_scripts": [
{
"matches": ["<all_urls>"],
"css" : ["jqm-demos.css","jquery.mobile.min.css"],
"js": ["index.js","jquery.js","jquery.mobile.min.js"]
}
]
}
now when i load popup.html page is looking like
but when i load extension it will be look like
Your manifest file should look like this:
{
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "Example",
"version": "1.0",
"manifest_version": 2,
"description": "Example Dictionary",
"browser_action": {
"default_icon": "16x16.png",
"icons": ["128x128.png"],
"default_title": "Dictionary",
"default_popup": "popup.html"
},
"icons": {
"16" : "16x16.png",
"48" : "48x48.png",
"128": "128x128.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css" : ["jqm-demos.css","jquery.mobile.min.css"],
"js": ["index.js","jquery.js","jquery.mobile.min.js"]
}
]
}
According to your snapshot, you should assign "popup.html" to default_popup property. This field means which page do you want to be shown in popup dialog when user clicked the browser action icon.
Hope this is helpful for you.