I have created a small extension that applies a simple css file to a website.
Currently though, it applies to ALL websites, and only applies when I click the icon for my extension.
I need it to always apply to one particular site
I think it's something up with my manifest.json:
{
"manifest_version": 2,
"name": "UI",
"description": "UI alter",
"version": "1.0",
"permissions": [
"tabs",
"activeTab",
"http://thewebsite.com"
],
"background": {
"scripts": ["override.js"],
"persistent": true
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "change ui"
}
}
You need to use a content script instead, and use a matches parameter in your manifest:
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
See Doc
Related
Am looking to migrate a manifest V2 extension to V3, but concerned extension might be disabled due to change in manifest permissions. My original plan was to create a new beta extension with existing V2 code and perms, install it from the chrome store locally, then update to manifest V3 perms and see what happens, but chrome store no longer accepts new V2 extensions.
Either the official documentation is purposely vague on the matter of permissions, or I missed something. Other SO questions I see are very specific. Hoping someone with more experience sees this and might be able to spot right away if anything may trigger with the manifest upgrade below. Ideally it's a smooth process given were already requesting a broad match on one of the content script blocks, and the permission list is also reduced.
Current manifest V2 (non pertinent values redacted)
{
"manifest_version": 2,
"name": "...",
"short_name": "...",
"description": "...",
"version": "1.8.0",
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["*://*.example.com/*",
"*://example2.co/*",
"*://*.example2.com/*",
"http://www.example3.com/*", "https://www.example3.com/*"],
"css": [],
"js": ["js/content_script1.min.js"],
"run_at":"document_end"
},
{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": [
"*://example2.co/*",
"*://*.example2.com/*",
"*://*.example3.com/*"
],
"css": [],
"js": ["js/content_script2.min.js"]
}
],
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "popup.html",
"default_title": "..."
},
"permissions": [
"activeTab",
"background",
"storage",
"tabs",
"notifications",
"http://*/",
"https://*/"
],
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://static.example.com https://api.example.com https://plugin.example.com https://example.com https://s3.us-west-2.amazonaws.com; object-src 'self'",
"externally_connectable": {
"matches": ["*://example.com/*"]
},
"icons": { ... },
"web_accessible_resources": ["/*.png", "/*.svg"]
}
New manifest V3
{
"manifest_version": 3,
"name": "...",
"version": "2.0.0",
"description": "...",
"minimum_chrome_version": "93",
"permissions": [
"storage",
"alarms"
],
"host_permissions": [
"*://*/*"
],
"web_accessible_resources": [
{
"resources": [
"/assets/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"chunks/*-*.js",
"ui/content-script/index.js"
],
"matches": [
"https://*/*",
"http://*/*",
"*://*/*"
]
}
],
"action": {
"default_title": "...",
"default_popup": "ui/popup/index.html",
"default_icon": { ... }
},
"icons": { ... },
"background": {
"service_worker": "service-worker.js",
"type": "module"
},
"content_scripts": [
{
"js": [
"ui/content-script/import-index.js"
],
"matches": [
"https://*/*",
"http://*/*"
],
"run_at": "document_end"
}
],
"externally_connectable": {
"matches": [
"*://example.com/*"
]
}
}
I am trying to create a simple chrome extension and at the moment I am injecting my scripts and stylesheets to the DOM to show an overlay div in the browser window. However when I change the tab or address the div won't appear until document is ready.
So is there a way to show an overlay div on all tabs without adding it to the DOM?
My manifest file:
{
"name": "My extension",
"description": "test",
"version": "0.0.1",
"manifest_version": 2,
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": [
"css/content.css",
],
"js": [
"libs/jquery-3.2.1.min.js",
"js/content.js"
]
}
],
"browser_action": {
"default_popup": "popup.html",
"default_title": "My extension"
},
"permissions": [,
"https://www.example.com/*", // I will update the div content from this URL
"storage"
],
"web_accessible_resources": [
"fonts/*.*"
]
}
I am adding it from my content.js like:
$('body').prepend(div);
It seems as if my background.js is triggered every refresh [planted an alert, and i see it every refresh, also my context menu is duplicating its inner self].
this is my manifest file:
"manifest_version": 2,
"name": "test",
"description": "test",
"version": "1.0",
"permissions": [
"activeTab",
"storage",
"tabs",
"contextMenus",
"https://*/*",
"http://*/*",
"https://www.google.com/_/chrome/newtab*"
],
"browser_action": {
"default_icon": "raj_robot.png",
"default_title" : "MemoMi"
},
"chrome_url_overrides" : {
"newtab" : "mypage.html"
},
"background": {
"scripts" : ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js" : ["selection.js"],
"run_at": "document_end"
}
],
And this is my background script:
function handle_click() {
alert("hi there!");
}
chrome.contextMenus.create({
title: "menu title",
contexts:["selection"],
onclick: handle_click
});
what am I doing wrong here?
Thanks!
Gura
Ok, I found it. I was actually implicitly triggering background.js by using methods in the content scripts, that should have been in the background.js. Just comment out your code and and see if it improves.
I have developed an extension and trying to upload it. but it gives error:manifest.json:34:1: an object must end with '}'.
Any help will be appreciated.
here is the content of manifest.json:
{
"manifest_version" :2,
"name": "Text to Speech",
"version" :"1.0.0",
"description" :"Indian language text to speech extension. Developed under TDIL programme by TTS consortium",
"options_page": "options.html",
"browser_action": {
"default_icon": { // optional
"19": "images/text2voice.png" // optional
},
"default_title": "Indian language TTS", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
"icons": { "16": "images/t2v-48.png",
"48": "images/t2v-48.png",
"128": "images/t2v-128.png" },
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"], //content script will be injected in all urls
"js": ["content_script.js"]
}
],
"permissions": [ //permitted to access following pages
"http://*/*",
"https://*/*",
"contextMenus",
"tabs"
]
}
Your comments such as //options is breaking your json. Please try to put the entire contents of manifest.json validator(http://jsonlint.com) and see the errors.
I started trying to write chrome extension and I'm having problem with simple function:
script inside "backgroound.html":
chrome.tabs.onUpdated.addListener(function(tabId,changedInfo,tab){alert("a")});
manifest.json file:
{
"name": "ogys",
"version": "1.0",
"description": "description",
"browser_action": {
"default_icon": "icon.png",
"background_page": "background.html"
},
"permissions": ["tabs", "http://code.google.com/"]
}
I understand that an change on any tab would trigger the event but nothing happends.
According with code.google.com, you've defined the backround_page in the wrong place.
Move the background_page property definition outer from browser_action action in this way:
{
"name": "ogys",
"version": "1.0",
"description": "description",
"browser_action": {
"default_icon": "icon.png"
},
"background_page": "background.html",
"permissions": ["tabs", "http://code.google.com"]
}