I'm trying to create a custom new tab page for Chrome. I have it in my manifest.json so that: "chrome_url_overrides": {
"newtab": "home.html"
}
It won't, however, load the scripts that I load in my home.html. I found out that you need to use content_scripts, so now I also have
"content_scripts": [
{
"matches": [""],
"css": ["style.css"],
"js": ["logic.js", "macros.js"]
}
]
What do I put in the "matches"? It doesn't allow "home.html" or "chrome://newtab".
Related
So, I am working on a Chrome extension that needs to be activated on any site with the domain example.extension where extension can be anything(.com, .de etc.).
I have a content script and in the manifest.json I included all the domain names listed one after another:
"content_scripts": [{
"js": ["content.js"],
"matches": ["https://www.example.com/*","https://www.example.de/*"]
}]
But how could I write something that matches example.* instead of enumerating all of them?
Note that I tried something like this and it does not work:
"content_scripts": [{
"js": ["content.js"],
"matches": ["https://www.example*"]
}]
These are 2 options:
First option:
You make use of the include_globs in the manifest as shown here
"content_scripts": [{
"js": ["content.js"],
"matches": [ "*://*/*" ],
"include_globs": [
"*://*.example.*/*",
]
}]
2nd Option: You can change your content script to check if the target URL matches www.example.*:
if (window.location.host.startsWith('www.example')){
//content script code
}
You can use a persistent background script and inject the script when the url matches your requirement. For example:
background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.url.indexOf('https://www.example.') == 0){
chrome.tabs.executeScript(tabId,{file:'content.js'});
}
});
I'm trying to build a basic extension that injects an alert script in to every page loaded. But it seems that the script is injecting only to some pages (most pages it's not injected in to), and I couldn't find a pattern in how it picks the pages to get injected to.
This is the manifest:
{
"name": "TestingTest",
"version": "0.1.1",
"description": "Testing Tests!",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["http://*/", "https://*/"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"background": {
"page": "background.html"
},
"permissions": [
"tabs",
"http://*/", "https://*/",
"cookies"
],
"icons": {
"16": "my_icon_64.png",
"32": "my_icon_64.png",
"48": "my_icon_64.png",
"128": "my_icon_64.png"
}
}
and this is ccontent.js:
alert("content script");
console.log("content script")
I'm getting the alert only on a select few pages. The pages that it's injected in to seem to vary if I load the extension in different Chrome profiles.
Your content script is probably loading only on pages where the pathname is just /. Add an extra * at the end of your url patterns:
"matches": ["http://*/*", "https://*/*"]
Making a simple plugin , which executes javascript when a page is loaded , and I want to execute different javascript on different page
But the following code wasn't working as expected , no "alert" was triggered:
background.html:
<html><body>
<script>
chrome.webRequest.onCompleted.addListener(
function(details) {
alert (details.url);
},
{
urls: ["*"],
types: ["main_frame"]
},
[]
);
</script>
</body></html>
manifest.json:
{
"name": "JS",
"background_page": "background.html",
"permissions": [
"webRequest",
"*"
],
"version":"0.10"
}
Alerts and console.log made from the background page of an extension simply aren't visible on the general pages.
If you want to see them, you have to open the background page : Go to the extensions settings page (menu tools/extensions) and click the "background.html" link below the name of your extension.
In your case it may be better, during development phase, to simply add the console.log and alerts in the content scripts (i.e. not the background page). So you can read them without opening the background page.
EDIT : as requested, an extension that will simply alert the location :
main.js :
alert(document.location.href);
manifest.json :
{
"name": "Any name",
"version": "3.3",
"background_page": "background.html",
"content_scripts": [
{
"matches": ["http://*/*"],
"all_frames" : true,
"run_at" : "document_end",
"js": [
"main.js"
]
}
]
}
Yes I tested it. And yes it's as painful as it sounds. You should use console.log instead of alert during your dev.
I want to insert a javascript file into the original new tab page of chrome to be executed,
I tried this but error in matching when I'm trying to load the extension.
"content_scripts": [
{
"matches": ["chrome://newtab/*"],
"js": ["jquery.js", "myscript.js"]
}
]
You cannot do that, you need to use override pages to do this.
{
"name": "My extension",
...
"chrome_url_overrides" : {
"newtab": "myPage.html"
},
...
}
Add this to your matches: "matches": ["*://*.google.com/_/chrome/newtab*"]
That url looks like an implementation detail, so no guarantees it won't change, but for now it works.
I'm trying to create an extension using this docs:
http://code.google.com/chrome/extensions/content_scripts.html
I want a part of JS code to run when document is ready (loaded).
This is my manifest.json:
{
"name": "OwnExtension",
"version": "0.1",
"content_scripts": [
{
"matches": ["https://my.site.eu/*"],
"css": ["styles.css"],
"js": ["main.js"]
}
]
}
This is my main.js:
alert(10);
Am I doing sth wrong, that nothing happend when page https://my.site.eu/ loaded in browser?
alert() doesn't work from a content script.
Try console.log("hello") and you should see it in the developer panel when you view your extension in debug mode.