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!
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 have a chrome extension built for scraping a few particular pages, and then generating docs with that data on screens built into the extension. It requires regular updates. I keep getting the "Publishing will be delayed warning" below when I go to publish in the Chrome Web Store. The message suggests that I use active tab and narrower host permissions even though my manifest contains the following:
"permissions": ["storage",
"declarativeContent",
"activeTab",
"downloads"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
In the background.js, I have a chrome.declarativeContent.onPageChanged.addRules statement with the following chrome.declarativeContent.PageStateMatcher conditions:
pageUrl: {hostContains: ''}
pageUrl: {hostContains: 'secure.vermont.gov'}
pageUrl: {urlContains: 'chrome-extension://'}
I replaced first one (intended for local files) with codeforbtv.org so there was no wildcard. Nonetheless, I got the same warning in the store.
The only tabs function I use is in the following code:
chrome.tabs.executeScript(null, { file: 'payload.js' });
Payload.js is two lines of code which grabs a large html block and sends it via chrome.runtime.sendMessage.
The relevant codebase can be found here in the extensionDirectory folder: https://github.com/codeforbtv/expunge-vt.
The extension can work on the sample HTML files in the sampleDocketHTML folder.
hostContains: '' matches every URL because '' is present in every string so it's a broad host permission.
To match local files you can probably use schemes: ['file'] but that will be still a broad host permission so I guess you'll have to forget about files.
urlContains: 'chrome-extension://' from the point of view of the web store's automatic detector is also a broad host permission because evidently the script doesn't analyze the pattern so it's considered just a substring match.
An extension can't work on other extension's pages anyway normally so you probably don't need this.
hostContains: 'secure.vermont.gov' is also a broad host permission because this pattern is not anchored to the TLD (top-level domain) so it may occur anywhere and thus match totally irrelevant hosts.
Either use hostSuffix: '.secure.vermont.gov' which will also match the dot-less version and any subdomain or hostEquals.
The warning is permissions based and is a general warning the review will take longer if you use more sensitive permissions for your extension.
Anecdotally I recently used wildcard host permissions (:///*) for a published extension and received the same warning. The review process ended up taking 3 days until it was approved.
You should in general expect longer review times when using sensitive permissions as Google's bandwidth to manually review extensions is currently reduced.
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
I am working on my first extension and am trying to create a simple extension to inject a draggable div on a page. That works nicely, but I want to preserve the location of the div on the background page (I'm also trying out local storage, but want to understand why this isn't working).
I do not need a button so have not created a popup.html file, which, I believe, is entirely optional. It certainly has worked so far just injecting javascript files.
However, I now get the following error thrown when executing chrome.extension.getBackgroundPage():
Uncaught Error: chrome.extension.getBackgroundPage can only be used in extension processes. See the content scripts documentation for more details.
The content scripts documentation did not seem to identify anything wrong with my approach: http://code.google.com/chrome/extensions/content_scripts.html
Here is a redacted manifest I am using:
{
"name": "My helper",
"version": "1.0",
"description": "Tastes great",
"background_page": "background.html",
"content_scripts": [
{
"matches":["https://page.of.interest/*"],
"run_at":"document_idle",
"js":[ "jquery.js", "jquery-ui-1.8.17.custom.min.js", "my_content_script.js"],
"css": [ "my_content_script.css" ]
}
],
"permissions": [
"background"
]
}
So I am running this statement inside "my_content_script.js". Is this NOT considered part of the extension process? Can I only run this on a popup.html (or other possibly?) file?
If this is the case, then maybe it is easier to just use localstorage rather than trying to communicate through the dom with the extension process.
Hope I've been clear despite my ignorance about some of these concepts.
I don't think the docs explicitly say you can't use chrome.extension.getBackgroundPage() from a content_script but because the content_script has permissions more oriented with the page it is being run on it isn't allowed access. The docs do mention a few methods you can use however.
Unlike the other chrome.* APIs, parts of chrome.extension can be used by content scripts:
You will have to use message passing to communicate between the background_page and the content_script.
You have to use the chrome.cookies.get() in background.html, and then do the communication between your content script and background.html for exchanging cookie data.
I've been having a look at Chrome extensions and I'd like to create an extension that interacts with a web page using a sidebar. So, user clicks button to launch extension, and the current page splits, with the right hand portion displaying my extension. I tried below, but I see nothing (working or otherwise). I'm not overly surprised it's not working as I do not have a sidebar.html file for one thing. The reason I have that in the manifest is because I saw it in another post in this site. The suggestion there was to use the "sidebar" line in manifest.json, but "sidebar" isn't even mentioned in the documentation as being a valid part of the manifest syntax.
manifest.json:
{
"name": "Test 1",
"version": "1.0",
"description": "Test Extension 1",
"page_action": {
"default_icon": "icon.png",
"default_title": "Testing",
"default_popup": "popup.html"
},
"sidebar" : {},
"permissions": [
"experimental"
]
}
popup.html:
<script>
chrome.experimental.sidebar.show();
chrome.experimental.sidebar.expand();
chrome.experimental.sidebar.navigate({path: "sidebar.html"});
</script>
I've enabled 'experimental'.
Thanks for any help.
The problem is that you are opening, theoretically, the sidebar inside your popup, not in the current page.
You should add a content script in the page, with a function that opens the sidebar. So, in your popup you should just retrieve the current tab then call this function from it.
Also, as Boris Smus said in your question, sidebars will be discontinued in future versions. So I advice you to create your own sidebar frame via content scripts.
Update
To help you, I've made a simple extension that create a sidebar on current page.
#Curtis hosted my sample extension on Github, you can clone it here.
I was looking for a sidebar solution as well and ended up at
Implement chrome.sidebar API thread.
According to the Sidebar PRD, it is already possible to create sidebar by:
injecting a script into the page which edits the HTML of the page to display a sidebar by modifying the DOM to insert an iframe which
loads the contents of the sidebar from a remote server.
the injected script can edit the DOM directly to display a sidebar, the contents of which are passed via message.
However, there are many downsides (explained in the same document) with regard to:
Usability, Performance, Security, Privacy (Extension sniffing as well as Third party cookies) and Accessibility.
You can watch a demo of what they are preparing for future Sidebar Component.
It might help in shipping the feature quicker if you star the thread.
update
Per this comment, Chrome will not get a built-in sidebar component.