For a Google-Chrome extension, I would like to load a content script on all Google pages. What is the best way to do this?
I tried this, in the manifest.json, but it does not work:
"matches": ["http://www.google.*/*", "https://www.google.*/*"],
This "works" but it is a bit long to write and I do not think it is the best practice:
"matches": ["http://www.google.com/*", "https://www.google.com/*", "http://www.google.fr/*", "https://www.google.fr/*", "http://www.google.de/*", "https://www.google.de/*", etc..."],
See Match patterns and globs. Unfortunately, Google-Chrome doesn't have a nice mechanism for top-level-domains (TLD's) in its matches specification. So, http://www.google.*/* throws an error and http://www.google.tld/* (Greasemonkey syntax) is not supported.
To work around this, widen the matches parameter and filter the results with the include_globs parameter.
Like so:
"matches": ["http://*/*", "https://*/*"],
"include_globs": ["http://www.google.*/*", "https://www.google.*/*"],
Related
I have been trying to look for a better alternative, but I can't seem to find a better way to do this.
My current Chrome Extension manifest has about 300 lines of code that includes these kinds of URL's.
"http://www.google.com/webhp*", "https://www.google.com/webhp*",
"http://www.google.ad/webhp*", "https://www.google.ad/webhp*",
"http://www.google.ae/webhp*", "https://www.google.ae/webhp*",
"http://www.google.com.af/webhp*", "https://www.google.com.af/webhp*",
"http://www.google.com.ag/webhp*", "https://www.google.com.ag/webhp*",
"http://www.google.com.ai/webhp*", "https://www.google.com.ai/webhp*",
"http://www.google.am/webhp*", "https://www.google.am/webhp*",
"http://www.google.co.ao/webhp*", "https://www.google.co.ao/webhp*",
"http://www.google.com.ar/webhp*", "https://www.google.com.ar/webhp*",
"http://www.google.as/webhp*", "https://www.google.as/webhp*",
"http://www.google.at/webhp*", "https://www.google.at/webhp*",
I need to match URL's that run my script for https://www.google.com/ (exact), https://www.google.com/webph* (alternative for Google homepage) and https://www.google.com/search* (to match the search tabs that I want: images, videos, shopping, etc.)
The main problem lies with the fact that I can't use a wildcard for the domain extension (.com/.de/.org).
There has to be a better way right? My current manifest looks like a disaster.
I think you will always need to have your URL specifications somewhere, there is however an option to have it match in a broader way by moving it to JavaScript, and this gives you the option to move it away from the manifest if you desire.
In your manifest, simply declare the extension to inject the background script on all URLs:
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"]
}]
And then in your background script, define where the extension should work, example:
var match = 'www.google.';
var excludes = ['maps', 'whatever'];
chrome.tabs.onUpdated.addListener(function(id, info, tab) {
if (tab.status !== "complete"){
return;
}
if(tab.url.indexOf(match) !== -1 && excludes.indexOf(tab.url) === -1){
// inject your script
chrome.tabs.executeScript(tab.id, {"file": "myScript.js"});
}
}
I attempted to create a custom element in a Chrome extension content script but customElements.define is null.
customElements.define('customElement', class extends HTMLElement {
constructor() {
super();
}
...
});
So apparently Chrome doesn't want content scripts to create custom elements. But why? Is it a security risk?
I can't seem to find anything in Chrome's extension guide that says it's not allowed.
I found the solution reading this page but the information was so cumbersome I wanted to write this answer for future readers (I am using Manifest v3)
Firstly, install the polyfill :
npm install #webcomponents/webcomponentsjs -D
Then add the polyfill in your content_scripts block in your manifest file :
"content_scripts": [{
"matches": [ "..." ],
"js": [
"./node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js",
"content.js"
]
}]
(important: you have to load it before your content script of course as the polyfill needs to load before you can use it)
Now it should works. Cheers
Note: the customElements feature is implemented in most modern browsers but for some reasons the interface is not available from a content script because the scripts are run in an isolated environment (not sharing the same window object space from the webpage the extension runs in).
As of now custom element can be used in chrome extensions UI. In Popup ui, option page ui and in the content script as well But it requires a polyfill which is this.
https://github.com/GoogleChromeLabs/ProjectVisBug - this is the one big custom element in the chrome extension.
In my google chrome extension i want to insert a JS file in a wild card url using the include_globs but it is not working
"content_scripts": [
{
"matches": [
"http://stackoverflow.com/*"
],
"include_globs": [
"*google*"
]
"js": [
"scripts/content-scripts/utils.js",
]
},
This script is inserted in stackoverflow but not in google.
You misunderstand how globs work.
They offer additional filtering after matches filter is applied.
include_globs
array of string
Optional. Applied after matches to include only those URLs that also match this glob. Intended to emulate the #include Greasemonkey keyword. See Match patterns and globs below for more details.
So your manifest applies to https://stackoverflow.com/questions/tagged/google-chrome-extension but not https://www.google.com/ or http://stackoverflow.com/
I understand your desire to use a glob: you basically want a google.* pattern. That's not allowed due to inherent security risks attached.
You can see the question Match pattern for all google search pages to see why and what are the possible workarounds.
For a Google-Chrome extension, I would like to load a content script on all Google pages. What is the best way to do this?
I tried this, in the manifest.json, but it does not work:
"matches": ["http://www.google.*/*", "https://www.google.*/*"],
This "works" but it is a bit long to write and I do not think it is the best practice:
"matches": ["http://www.google.com/*", "https://www.google.com/*", "http://www.google.fr/*", "https://www.google.fr/*", "http://www.google.de/*", "https://www.google.de/*", etc..."],
See Match patterns and globs. Unfortunately, Google-Chrome doesn't have a nice mechanism for top-level-domains (TLD's) in its matches specification. So, http://www.google.*/* throws an error and http://www.google.tld/* (Greasemonkey syntax) is not supported.
To work around this, widen the matches parameter and filter the results with the include_globs parameter.
Like so:
"matches": ["http://*/*", "https://*/*"],
"include_globs": ["http://www.google.*/*", "https://www.google.*/*"],
I'm trying to write a chrome extension that will replace some images on https://www.ourgroceries.com/ with my own images.
Specifically, I want to replace the top buttons "overview-label", "features-label", faq-label", "your-lists-label", "download-label".
I tried to use this code to replace "overview-label", but it didn't work:
window.onload = function () {document.getElementById("overview-label").style.backgroundImage="url('http://www.321space.com/content/space_telescope/thumb_small/opo0317d.jpg')";};
I tried using this script locally, and it worked, which means that maybe there's a script on this website that prevents changing these images, but I couldn't find it.
Any ideas how to replace these images?
What you need is an extension like Stylish or write you own one using contentscripts
"content_scripts": [
{
"matches": ["https://www.ourgroceries.com/*"],
"css": ["mystyles.css"]
}
],