Dynamically launch content script based of matching url - javascript

So this is currently hardcoded in manifest.json
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": [],
"js": ["content-script.js"]
}
],
my question is - is there a way to dynamically launch a content script for a webpage? I am actually waiting for user input in my Chrome extension, to determine which page to use a content script for.

you can create and written regexp as per your requirement
"content_scripts": [
{
"matches": ["regex 1" ,"regexp 2",...."regexp N"],
"css": [],
"js": ["content-script.js"]
}
],

Why don't you just get the current page URL (location.href) and then decide whether you want to run your content script or not?
I think this would be easiest way to do it.

Related

Permissions for simple text-replace Chrome extension?

I have an extension I've developed for Chrome (and Firefox, down the road), but can't get it to work when downloaded from the App Store. I think the problem is the permissions.
It's simple: the extension looks for particular text on a page (say: "dog") and highlights it. Just a simple HTML swap.
The .crx file includes the manifest and the javascript which does the replacement (and works locally). This is packaged with the icon and another version of the manifest (unless I'm doing something wrong here?) and submitted to the store. I tried various permissions (like "activetab") but it didn't work.
The three files are:
manifest.json (sits outside .crx)
{
"name": "[name]",
"version": "[version]",
"description": "[description]",
"manifest_version": 2,
"icons": {
"128": "icon_128.png"
},
"permissions": ["activeTab"],
"content_scripts":
[
{
"matches": ["<all_urls>"],
"all_frames": true,
"js": ["script.js"],
"run_at": "document_end"
}
]
}
manifest.json (sits inside the .crx)
{
"name": "[name]",
"version": "[version]",
"description": "[description]",
"manifest_version": 2,
"author": "[author]",
"permissions": ["activeTab"],
"content_scripts":
[
{
"matches": ["<all_urls>"],
"all_frames": true,
"js": ["script.js"],
"run_at": "document_end"
}
]
}
script.js (sits inside the .crx)
Runs the actual search and replace. Runs without issue locally.
What am I doing wrong? Pulling out my hair.

Run JS with "matches" even if the page doesnt refresh

I am working on a school project/ Chrome extension that assists the Checkout progress of a Website,
i declared in my mainfest.json that a content.js file should run if it matches a certain URL.
"content_scripts": [
{
"matches": [
"https://www.solebox.com/de_DE/checkout?stage=payment*"
],
"js": ["payment.js"]
},
{
"matches": [
"https://www.solebox.com/de_DE/checkout?stage=placeOrder*"
],
"js": ["placeorder.js"]
as you can see in the link, there are different stages. So from stage "payment" to stage "place order" the page won't refresh, ergo the script won´t notice that the URL changed so the js cant be executed.
Is there any way the chrome extension can always check the URL?
You could use try using webNavigation. Just check the tab-url and inject your desired script based on that.
chrome.webNavigation.onBeforeNavigate.addListener(function (tab) {
chrome.tabs.get(tab.tabId, function (results) {
if (results.url.match("some URL")) {
chrome.tabs.executeScript(tabId, {
file: "someScript.js"
});
}
});
});
You can read about the webNavigation API here

chrome:// Invalid Scheme

I've enabled "chrome://flags/#extensions-on-chrome-urls" which should allow me to create extensions that can run on chrome:// sites. When I try to unpack my extension, however, it fails with the error message: "Invalid value for 'content_scripts[0].matches[0]': Invalid scheme." I don't believe my script.js is a problem since the unpacking doesn't fail when I replace the "chrome://extensions" part with an http or https sites. Any help would be greatly appreciated, does anyone know a fix?
manifest.json:
{
"name": "Does something on chrome://extensions",
"version": "1.2",
"description": "Read the name",
"manifest_version": 2,
"browser_action": {
"default_title": "Ext",
"default_popup": "popup.html"
},
"content_scripts": [ {
"matches": ["chrome://extensions"],
"js": ["script.js"]
} ]
}
Note: This is an undocumented feature and may fail without warning in the future.
chrome://extensions is an invalid match pattern. You cannot omit the path component, so at the very least you should use "chrome://extensions/*".
This does however not work either, because the actual URL is chrome://chrome/extensions. Or, if you are specifically interested in the page that shows the list of extensions, chrome://extensions-frame.
To run a content script at the extensions page, use --extensions-on-chrome-urls and:
"content_scripts": [{
"matches": ["chrome://chrome/extensions*"],
"js": ["script.js"]
}]
or (the frame that lists all extensions, i.e. what you see when you visit chrome://extensions):
"content_scripts": [{
"matches": ["chrome://extensions-frame/*"],
"all_frames": true,
"js": ["script.js"]
}]

Chrome Extension multiple Matches

I want to activate some Scripts on twitch.tv with a chrome extension.
So I got a file called script2.js and a file called script3.js
In my manifest, I want to say www.twitch.tv is loaded script2.js has to be loaded, and if www.twitch.tv/directory is loaded, script3.js has to be loaded:
{
"content_scripts": [{
"js": [ "script2.js" ],
"matches": [ "*://*.twitch.tv/" ]
}, {
"js": [ "script3.js" ],
"matches": [ "*://*.twitch.tv/directory" ]
} ],
"description": "desc",
"manifest_version": 2,
"name": "TwitchTV",
"permissions": [ "*://*.twitch.tv/*" ],
"version": "1.0"
}
script2 is loaded, but script3 not. Am I doing something wrong?
EDIT:
Well with looking into the manifest I mentioned, the manifest is right.
I added an alert("test"); on top of my script and the alert is triggerd, so the script is executed correctly. But:
I add some new Buttons onto the site. And if I copy&paste my script3.js to the chrome-console on twitch.com/directory, the new buttons will be shown. But if the script is executed by chrome the buttons are not there.
Why could this be, that the script seems to be correct (because if i load it manually it works) but if its loaded automatically its wrong?
Reverse the two rules, because the first will always match
{
"js": [ "script3.js" ],
"matches": [ "*://*.twitch.tv/directory" ]
},
{
"js": [ "script2.js" ],
"matches": [ "*://*.twitch.tv/" ]
}]

Keyboard bindings in Chrome Extension content script with GMail

I'm creating a Chrome extension that uses key bindings (i.e. will use javascript keydown and keyup event handlers) via a content script. I've hit upon a snag while trying to get this to work with GMail, though.
The the handler function in the following code (content script) seems to trigger only when I chat with someone via GChat:
$(window).bind('keydown', function(e){console.log('yay!');});
Unfortunately, it doesn't seem to activate anywhere else, including when I am trying to send an email. I looked into the GMail webpage source, and it turns out all of the content actually displayed resides in an iFrame with id canvas_frame, so I tried this:
$('#canvas_frame').content().live('keydown', function(e){console.log('yay!');});
and this:
$('#canvas_frame').content().find('body').live('keydown', function(e){
console.log('yay!');
});
Unfortunately, that didn't work either.
My manifest.json looks like this:
{
"name": "extension",
"version": "1.0",
"description": "description",
"background_page": "background.html",
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css": [],
"js": [
"main.js"
]
}
],
"all_frames": true,
"permissions": [
"http://*/*", "https://*/*"
]
}
I was wondering if anyone had a clue about what was going on, what's the right way to do this with GMail, and if $('#canvas_frame').content().live(...) is the right way to go about it.
Thanks!
Your all_frames parameter is misplaced in manifest, it should be:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"all_frames": true,
"js": ["main.js"]
}
],
I would approach this problem by injecting content scripts into iframes themselves and doing all key bindings there. Identify URLs of those iframes and inject individual content scripts into each of them. For example:
"content_scripts": [
{
"matches": ["http://gmail.com/*"],
"all_frames": false,
"js": ["main.js"]
},
{
"matches": ["http://gmail.com/iframe1.html"],
"all_frames": true,
"js": ["iframe1.js"]
},
{
"matches": ["http://gmail.com/iframe2.html"],
"all_frames": true,
"js": ["iframe2.js"]
}
],

Categories

Resources