I'm writing a Chrome plugin for my needs. I'd like to be able to select HTML elements like Adblock Plus do to be able to watch changes on the element and its children. I use MutationObserver in my content.js.
How can I to make it work the way I want? I'd like to trigger it from the popup menu. I see there's this API: chrome.devtools.inspectedWindow, probably I can make use of it somehow?
manifest.json
{
"manifest_version": 2,
"name": "PageFontStyle",
"version": "1.0",
"description": "Changes font style on page",
"devtools_page": "devtools.html",
"icons": {
"128":"icon128.png",
"48":"icon48.png",
"16":"icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html",
"default_title": "Page Font Style"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-3.3.1.min.js", "content.js"],
"css": ["content.css"]
}
],
"permissions": [
"tabs",
"activeTab"
]
}
Related
How to to migrate the code I have from Manifest 2 to 3. I changed the 2 to a 3. Thanks!
{
"manifest_version": 3,
"name": "Algebra-Geometry",
"description": "Learn Algebra and Geometry!",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["tabs", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["main.js", "popup.js"]
}
]
}
Short Answer: First, I suggest you go through the official migration checklist to switch from Manifest2 to Manifest3. It's straightforward to understand from their official website.
If you still need assistance, here's the long answer for that:
While doing the conversion from manifest 2 to 3, it is mentioned in the migration guide that:
In Manifest V3, you'll need to specify host permissions and optional
host permissions separately from other permissions.
Also, manifest 3 will not be supported by the chrome version below 93.
{
"manifest_version": 3,
"name": "Algebra-Geometry",
"description": "Learn Algebra and Geometry!",
"version": "1.0",
"minimum_chrome_version": "93",
"action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["tabs", ],
"host_permissions": [
"<all_urls>",
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["main.js", "popup.js"]
}
]
}
In addition, with Manifest V3, chrome planned to drop support for and start asking for permissions at runtime, using [activeTab][3] host permission by default. So I'm not quite sure about the thing.
{
...
"permissions": [
"tabs",
"bookmarks"
],
"optional_permissions": [
"unlimitedStorage"
],
"host_permissions": [
"http://www.blogger.com/",
],
"optional_host_permissions": [
"*://*/*",
]
...
}
I am coding a Web Extension. It opens up as a popup when clicked that user can interact with. Popup displays HTML and CSS correctly, but fails to execute JS.
Here the code of my manifest.json file:
{
"manifest_version": 2,
"name": "To-Do List",
"description": "Keep track of your tasks easily.",
"version": "1.0.0",
"icons": {"128":"icon.png"},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["*://*/"],
"js": ["app.js"]
}
],
"permissions": ["activeTab"]
}
All the files are in same directory!
I created a Chrome app you can try it here
https://chrome.google.com/webstore/detail/style-scout/chbdclbnkfcocaolknbjmmppendkmebh
but after I install it and I open a new tap the app fires immediately and only for the very first time... why is that happening?
manifest is
{
"background":
{
"scripts": ["background.js"]
},
"browser_action":
{
"default_icon": "icon-128.png",
"default_title": "Style Scout"
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
"name": "Style Scout",
"short_name": "Style Scout – Fonts & Colors Finder",
"description": "Fonts & Colors Finder",
"homepage_url": "https://stylescout.org",
"icons":
{
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png"
},
"permissions": ["tabs", "http://*/*", "https://*/*", "storage"],
"version": "0.612",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["activate-np-chrome.js"]
}],
"web_accessible_resources": ["np-chrome.js"]
}
and background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {
file: "np-chrome.js"
})
});
np-chrome.js is the actual full script of my app...
ok I completely removed this part
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["activate-np-chrome.js"]
}],
"web_accessible_resources": ["np-chrome.js"]
and now it works, because I didn't know that content_scripts actually inject and fire the script for every single tab ever, whereas i just needed to fire my script when the user clicks my browser button
I have an extension that i'm trying to add content scrips alongside background scripts but it just says invalid when trying to temp load.
{
"description": "Creates tasks and calculates application incomplete date",
"manifest_version": 2,
"name": "Task Creator",
"version": "1.31",
"permissions": [
"http://*/*", "tabs", "https://*/*",
],
"icons": {
"48": "icons/page-48.png"
},
"web_accessible_resources": [
"style/popUpStyle.css",
"script/popUpTask.js",
"script/logicTaskFiller.js",
"js/autosize.js",
"style/jquery-ui.css",
"js/jquery-1.12.4.js",
"js/jquery-ui.js"
],
"content_scripts":{
"matches": ["*urlhere.com*"],
"js": ["comSendForm.js"]
},
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
}
}
I'm not quite sure where i'm messing up. It works instantly after I take out the content scripts, but I'm doing multiple things with this extension and I really do need the content scripts to run on a certain page. Any help is appreciated.
error message
1477430058898 addons.webextension. ERROR Loading extension 'null': Reading manifest: Error processing content_scripts: Expected array instead of {"matches":["*://url.com/"],"js":["comSendForm.js"]}
The error that you are getting is that your manifest.json has the value of the content_scripts key as an Object. The value of the content_scripts key needs to be an Array of Objects, not just an Object.
In addition, you have the following problems:
The line:
"http://*/*", "tabs", "https://*/*",
should not have the trailing ,. This is actually reported as the first error, so you may have copied the contents of your manifest.json file inaccurately.
Your matches pattern is invalid. You probably wanted something like:
"matches": ["*://*.urlhere.com/"],
With all of those changes your manifest.json would look like:
{
"description": "Creates tasks and calculates application incomplete date",
"manifest_version": 2,
"name": "Task Creator",
"version": "1.31",
"permissions": [
"http://*/*", "tabs", "https://*/*"
],
"icons": {
"48": "icons/page-48.png"
},
"web_accessible_resources": [
"style/popUpStyle.css",
"script/popUpTask.js",
"script/logicTaskFiller.js",
"js/autosize.js",
"style/jquery-ui.css",
"js/jquery-1.12.4.js",
"js/jquery-ui.js"
],
"content_scripts": [
{
"matches": ["*://*.urlhere.com/"],
"js": ["comSendForm.js"]
}
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
}
}
I am trying to implement a Github library within an extension. The file system has multiple files with the same names like "index.js" but when I look to reference these within the Manifest.json I feel like They will just throw errors
{
"manifest_version": 2,
"name": "log",
"description": "log",
"version": "1.0",
"browser_action": {
"default_icon": "favicon.png",
"default_popup": "popup.html"
},
"options_page": "options.html",
"background": {
"scripts": [ "eventPage.js", "background.js", "Gruntfile.js", "unittests.js", "crypto.js","index.js", "aes.js", "blowfish.js", "cast5.js","des.js","index.js","towfish.js", "index.js","md5.js","ripemd.js","sha.js", "armor.js", "basic.js", "index.js", "key.js", "keyring.js", "packet.js", "Signature.js", ]
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": [ "Log.js" ]
}
],
"permissions" : [
"storage",
"notifications",
"contextMenus",
"http://*/*",
"https://*/*",
"tabs"
]
}
Can someone help me find documentation on how to handle file systems duplication within the Manifest.json?