I am developing a Extension-detect site that can detect whether the client has installed my extensions.
I try to load the manifest.json file so that I can know.
But when I tried, I got a:
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
So I put my website in the json, like:
"web_accessible_resources": [ "www.mysite.com/*", "mysite.com/*" ]
But it still doesn't work.
Is there anything I need to fix?
Thanks
web_accessible_resources is a list of files packed in your extension that can be requested by any webpage loaded by your users browser. So if you want to load your manifest from your site you need an entry like this:
"web_accessible_resources": [ "manifest.json" ]
However this will allow any site your users visit to discover if your extension is installed so the recommended approach is to use a content_script that adds a class to the body of all the pages on your domain. That way your sites JS can check for the class for installation but no information will be accessible to other sites.
// content_script run on your domains
document.documentElement.classList.add('ext-name-installed');
On your site you can now check to see if the extension is installed with
// Run on website to test for extension
if(document.documentElement.classList.contains('ext-name-installed')) {
// Extension is installed
}
Related
With a Manifest v3 Chrome Extension, is it possible to load an extension HTML resource file into a new tab? I was thinking about providing a plugin with a larger, full-page user experience than what the popdown panel could provide. I created a page.html (just simple HTML for now, no JS or CSS) and put it in my extensions folder. I then added this to the manifest.json:
"web_accessible_resources": [
{
"resources": ["page.html"],
"matches": [ "*://*/*" ]
}
]
I reloaded the plugin and then tried navigating to this page in my browser with:
chrome://extensions/MY-EXTENSION-ID-GOES-HERE/page.html
I get an ERR_FAILED and "This site can't be reached" message.
There is no need for a web_accessible_resources in this case in the v3 manifest for this action. Just use something like the following code to open it from the service-worker.js:
chrome.tabs.create({url:chrome.runtime.getURL('page.html'),active:true});
This will automatically open something akin to...
chrome-extension://MY-EXTENSION-ID/page.html
...where MY-EXTENSION-ID is automatically filled in by chrome.runtime.getURL('page.html').
You can then reference remote and local resources in your HTML tags. For local resources, just use relative pathing. For remote resources, keep an eye on Google Chrome Extension developer policies.
Thanks goes to wOxxOm for his assistance.
I'm working on a chrome extension and it involves a small overlay on sites with an icon of the product/brand. Last week, I rendered this fine. My content script is a simple React.js app that mounts into a newly created div on any arbitrary page and creates a <img> element:
<img className="image" src={chrome.runtime.getURL(logo)} />
This worked great and it required an entry in the manifest:
"web_accessible_resources": [
{
"resources": [
"/*.png",
],
"matches": []
}
],
However, I came back to the project this week and the icon no longer displays. No changes to code or manifest over the weekend. All I can think of is a chrome update introduced a bug.
The console displays this:
Denying load of chrome-extension://gnncmcgealbfkmmiahajhhlhpgfldijh/ccffc3aeb870eaff711b.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
I wondered if * support was removed so I added the filename explicitly:
"resources": [
"ccffc3aeb870eaff711b.png",
"/ccffc3aeb870eaff711b.png"
],
Both with and without a / because there are no docs for this manifest yet for some reason.
This didn't work either.
The only documentation for this is here: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#web-accessible-resources but it claims most of the fields are unused.
This definitely worked last week though, I even have a screenshot (though I cannot share publicly due to NDA reasons) so you'll all just have to trust me on that one!
Does anyone know of any additional manifest configuration required to get this working again? Chrome documentation seems to be lagging behind. Is this a bug or just a lack of documentation or feedback from the extension engine or browser?
Thanks!
I'm trying to implement an extension that can auto fill all fields in an application website. Currently it works great in main frame, but doesn't work if the fields are in a iframe.
I'm allowing users to either use content script to auto inject JS or click a button to inject JS manually.
The problem I have is my JS is not injecting into iframe even I set allFrames to true, but content script work.
"content_scripts" : [
{
"matches" : ["https://*/my_url/*"],
"js" : ["/auto_fill.js"],
"all_frames": true
}
]
This content scripts work fine, JS is being injected. However,
my_button.addEventListener('click', () => {
chrome.tabs.executeScript(null, {
file : "/auto_fill.js",
allFrames : true
})
});
This executeScript doesn't work, nothing happen.
The iframe I'm trying to work with is kinda a dynamic iframe (where I have to click few buttons to load and navigate to the application site I want)
Do I have to find out the iframe id or tab id in order for this to work, please provide some hints.
Please let me know if I'm not making myself clear.
Thank you so much for your time.
As the comments revealed, the extension is using the activeTab permission without host URL patterns (just as the documentation suggests), but this permission only grants access to the tab's main URL. When an iframe points to a different URL origin, it won't be granted by activeTab, which is an intentional restriction enforced since Chrome 45, see https://crbug.com/826433.
I'm trying to use SignalR in a chrome extension on a background page.
Everything seems to work fine until it tries to call negotiate. It seems to be taking the caller (which is a chrome-extension background page) and trying to call negotiate against that, which gives me a 404 while trying to call this page:
chrome-extension://edcdcfjmmmchhgmomfemdkomibeoloko/signalr/negotiate?_=1372007788595
I'd imagine that it should be calling
https://myserver.com/signalr/negotiate?_=1372007788595
But I don't know how to override SignalR with a specific host. Can I override SignalR to work in a chrome extension on a background page
I assume it is javascript you are using? Try
$.connection.hub.url = "http://myserver.com/signalr";
This took me a couple hours to figure out but here's a few steps to get going on making signalr work with a google chrome extension.
Place within the javascript
$.connection.hub.url = "http://yoursever.com/signalr"`
Within the manifest.json file for the google chrome you must give permission to access the server. I would add something like this to make it easy.
"permissions": [
"http://*/*",
"https://*/*"
]
Within your global configuration you need to change allow cross domain requests. Change
RouteTable.Routes.MapHubs()
to
RouteTable.Routes.MapHubs(new HubConfiguration()
{
EnableCrossDomain = true
});
Ok, so just the other day I learned that you can inspect the devtools if it is in its own window(explained here). I also learned that you can style the devtools with your own css by editing the Custom.css file in your profile on your computer(more on that here).
What I want to do is not only add css, but also javascript, via a chrome extension. I am very aware of devtools pages, but those do not do what I want. Pretty much I want to get a content script to run on the devtools inspector itself. I found one extension that does exactly this, but for the life of me I have not been able to replicate it(even when copy-pasting the code!!). The extension is the "Discover DevTools Companion extension" from Code School(on the webstore). They even explain how it works, but I still have had no luck. That was the only extension I have found that does what I want. So I guess what I'm really asking is if its just me that cannot get it to work or if others that try are having trouble also.
Usually, you cannot create a Chrome extension which injects code in a devtools page.
The "Discover DevTools Companion" extension from now on, referred to as DDC is allowed to do this, because this extension is whitelisted in the source code of Chromium: (this is no longer the case)
// Whitelist "Discover DevTools Companion" extension from Google that
// needs the ability to script DevTools pages. Companion will assist
// online courses and will be needed while the online educational programs
// are in place.
scripting_whitelist_.push_back("angkfkebojeancgemegoedelbnjgcgme");
If you want to publish an extension in the Chrome Web Store with these capabilities, give up.
If you want to create such an extension for personal / internal use, read further.
Method 1: Impersonate the DDC a whitelisted extension
The easiest way to create an extension with such permissions is to create an extension with the extension ID of a whitelisted extension (e.g. ChromeVox). This is achieved by copying the "key" key of its manifest file to your extension's manifest (see also: How to get the key?). This is a minimal example:
manifest.json
{
// WARNING: Do NOT load this extension if you use ChromeVox!
// WARNING: Do NOT load this extension if you use ChromeVox!
// WARNING: This is a REALLY BIG HAMMER.
"content_scripts": [{
"js": [ "run_as_devtools.js" ],
"matches": [ "<all_urls>" ]
}],
// This is the key for kgejglhpjiefppelpmljglcjbhoiplfn (ChromeVox)
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEGBi/oD7Yl/Y16w3+gee/95/EUpRZ2U6c+8orV5ei+3CRsBsoXI/DPGBauZ3rWQ47aQnfoG00sXigFdJA2NhNK9OgmRA2evnsRRbjYm2BG1twpaLsgQPPus3PyczbDCvhFu8k24wzFyEtxLrfxAGBseBPb9QrCz7B4k2QgxD/CwIDAQAB",
"manifest_version": 2,
"name": "Elevated Devtools extension",
"version": "1.0"
}
run_as_devtools.js
if (location.protocol === 'chrome-devtools:') (function() {
'use strict';
// Whatever you want to do with the devtools.
})();
Note: This method is truly a hack. Since the extension shares the same ID as ChromeVox, both extensions cannot co-exist. And if Chrome decides to remove the whitelisted extension, then your permissions will evaporate.
Instead of filtering via the content script, you can also use the include_globs key to restrict the content script to devtools only.
Method 2: Modify resources.pak
I suggest to go with method 1 if possible. When method 1 fails (e.g. because the extension is no longer whitelisted), use the next method.
Get paktools.py, unpack.py and pack.py from DennisKehrig/patch_devtools (on Github).
Locate your Chrome directory containing resources.pak.
Run python2 unpack.py resources.pak, which creates a directory resources containing all files (all file names are numbers).
Locate the file containing a script which runs in the context of the developer tools. Add your desired code there.
Remove resources.pak
Run python2 pack.py resources to create the new resources.pak file.
Note: resources.pak may be replaced when Chrome is updated, so I suggest to create a script which automates my described algorithm. That shouldn't be too difficult.
If you're interested, you can look up the .pak file format in ui/base/resource/data_pack_literal.cc (description in human language).
For those googlers who end up at this page (as I did) looking for something else, this page answers the question of manipulating DevTools ITSELF - not adding jQuery to DevTools, or injecting javaScript onto a web page. For those, see here instead:
Inject jQuery into DevTools (Chrome or Firefox):
Firefox DevTools: Automatically injecting jQuery
Inject your own javascript/css onto any web page:
How to edit a website's background colors