I'm creating a Chrome extension which inserts a content script, but the content script appears to be loaded as an empty file.
manifest.json
{
"manifest_version": 2,
"name": "Test",
"content_scripts": [
{
"matches": ["http://stackoverflow.com/*"],
"js": ["content_script.js"]
}
]
}
content_script.js
console.log('hello world');
When I go to chrome-extension://<extension's id>/content_script.js, I see the correct content of console.log('hello world');, but in the browser it appears empty:
And nothing is printed to the console. Does anyone know what can cause this?
Also, I tried adding some more files and folders. All the files and folders appear in the sources tab, but all the files are empty.
I had the same issue. In my case, the reason Chrome refused to read content.js is that the file was an alias (I was using ln -s). Copy the original file to the extension folder solved the issue for me.
Saw that too a few times on Chrome dev channel, it started a few months ago, obviously a bug.
Try restarting the browser.
Try adding debugger; in the code.
Try specifying "run_at": "document_start" (or document_end) in the content script declaration.
Related
I would like to use Tippy.js in a simple Chrome Extension I am building. Basically, I want to use Tippy alongside my content script, but I do not know how to include it without using the cdn.
I know I should include it in the manifest.json file with the content_scripts, but you are not supposed to use a cdn link here. If I install the package with node, I get all the files found here: https://unpkg.com/browse/tippy.js#4.3.5/ but I'm not sure which one to link in the manifest file.
Here is what I currently have in my manifest.json:
"content_scripts": [
{
"matches":[
"<all_urls>"
],
"js": [
"./node_modules/tippy.js/umd/index.min.js",
"./src/content.js"]
}
],
I realize this is probably a silly attempt at including the external library, but I'm just not sure how to include libraries like this that don't come packaged in a single file.
For tippy.js you need popper.js as well
Save this two files in your project
https://unpkg.com/popper.js#1.15.0/dist/umd/popper.min.js
https://unpkg.com/tippy.js#4.3.5/umd/index.all.min.js
Add this two files in the content script, like you have added
Umd is a choice in this case, because Chrome Extension didn't support import and export keywords, so choose node_modules/tippy.js/umd/index.min.js and make sure that node_modules is at the same directory as your manifest.json file.
"content_scripts": [
{
"matches":[
"<all_urls>"
],
"js": [
"node_modules/tippy.js/umd/index.min.js",
"src/content.js"
],
"css": [
"node_modules/tippy.js/themes/light.css"
]
}
]
In my manifest.json I have:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/punycode.js", "js/content-main.js"]
}
],
However if I rename the content-main.js to content-main1.js update the manifest.json to reflect the change ("js/content-main1.js") and reload the extension the script no longer runs.
How is this possible? Thanks
The Reload Extensions extension that I was using wasn't reflecting the changes in the directory.
It seems the Chrome does not inject content script into local files that are of type MHTML. They might do this for security reason. They don't allow you to download files that have MHTML extension either. So that makes me suspicious.
My content script gets injected properly if the local file type is HTML.
Here is my manifest:
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*", "file://*/*", "<all_urls>" ],
"run_at": "document_start",
"js": [
"js/contentscript.js"
]
}
],
"permissions": [ "tabs", "http://*/*", "https://*/*"],
In the extension management page I also checked:
[x] Allow Access to file URLs
And finally the error I get:
test1.mhtml:1 Blocked script execution in 'file:///Users/test/Downloads/test1.mhtml'
because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
Is there anyway to work around this and get my script injected in .mhtl file?
Update:
Here is a simple test extension that shows script injection and a test mhtml file. Make sure you check this check box in extension management page. [x] Allow Access to file URLs
Update 2:
Found it. It is a chrome bug https://code.google.com/p/chromium/issues/detail?id=452901
Update 3:
so it looks like that it works but chrome debugger just does not show the content script files in the UI when the file type is MHTML.
The content script is added via the standard declaration, for example:
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"run_at": "document_end",
"js": ["content.js"]
}
],
Notes:
it won't be shown in Chrome devtools -> Sources -> Content scripts panel which seems a bug.
MHTML has some restrictions so certain features may not work, use console.log everywhere.
I am trying to write a Chrome extension using Dart. So far everything goes well except for the content script --- the "main" function in the content script dart file does not seem to run.
To be more specific, first of all Dartium cannot be used since giving a dart file in the "js" rule in the manifest caused Dartium to complain; I next tried to compile the dart file (with csp: true) then make the manifest to include the compiled js file directly --- then I'm stuck, it seems that no matter what I try, the (compiled) "main" function just does not run.
Any suggestions?
Update:
The manifest file:
{
"manifest_version": 2,
"name": "Assistant",
"description": "Assists you with various tasks.",
"version": "1.0",
"minimum_chrome_version": "26.0",
"permissions": ["<all_urls>", "storage"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [
"packages/browser/dart.js",
"dart_content_script.dart.js"
],
"run_at": "document_start",
"all_frames": false
}
],
"browser_action": {
"default_popup": "popup.html",
"default_icon": "bulb.png"
},
"background": {
"page": "background.html"
}
}
The content script dart file:
void main() {
print('main done');
}
The pubspec.yaml:
name: AssistentExtension
dependencies:
browser: any
chrome: any
dev_dependencies:
unittest: '>=0.10.0'
transformers:
- $dart2js:
csp: true
In the Chrome developer console, I can find the string "main done" meaning that the "main" function is indeed included in the compiled js, but nothing is printed meaning it is not run.
I had the same problem like yours. At that time I looked into the console logs, a log saying chrome package is missing (but i don't know what cause it), so I manually added it back to build folder, then it worked so I can see my logs written in main().
When I run test_ext that come with official chrome pub, I get a different error message in console log, again I solved it and then the test_ext sample is running well too.
So, my advise is take a look at the console log, it might help. You can open console for extension by right click on popup UI of extension and select 'Inspect Element' to open it.
I've previously used coffeescript for Chrome extensions, but only for background pages and popup pages - each of which can launch coffeescript via loading coffee-script.js and my own .coffee file from <script> tags.
However this time I'd like to make a content script - per the chrome docs, content scripts are specified not via a .html page, but via the manifest.json directly.
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
Since I don't have a .html file, I can't use a <script type="text/coffeescript"> tag. Is there a way to launch a .coffee file from a .js file directly?
Or is my only option to pre-compile the .coffee file?
The convention for apps is to compile to Javascript and publish that, so your app doesn't depend on Coffeescript. This makes sense for Chrome extensions too. See https://github.com/hickford/nutake for an example
You can manually launch scripts using coffeescript.js
I didn't look further but I see compile / eval / load and run functions on the CoffeeScript global object.