How would I go about including the jQuery library in my Google Chrome Content Script? I have tried, fruitlessly, of course. Should I use <script src="..." /></script>, or is there a different/better way to go about it? Thanks in advance!
You need to load it in your manifest.json, like this:
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["jquery-1.4.2.js", "extension.js"]
}
]
The above answer works. An alternate answer which uses injection (which is what I was really looking for when I found this page first) is here:
Google Chrome Extensions: How to include jQuery in programmatically injected content script?
Related
My extension is supposed to work with https://web.whatsapp.com/:
"content_scripts": [
{
"matches": ["https://web.whatsapp.com/"],
"js": ["entry/content-script/cs.js"],
"css": ["entry/content-script/zen-mode-ui.css"]
}
],
When I load web.whatsapp.com directly, in a new tab - all is fine: the stylesheet is injected like it's supposed to:
But! If I first go to whatsapp.com and there click the link to Whatsapp Web - when web.whatsapp.com loads, the css is NOT injected:
There is no injected stylesheet snippet.
Although, the content script loads just fine.
If I then refresh the page - all is good.
Is it a bug in chrome extensions engine itself?
Setting "matches": ["https://web.whatsapp.com/*"] (note the final asterisk) have fixed it.
Looks like a bug in Chrome. Track here.
I am currently working on a Chrome extension which has a script that needs to access global properties of the page. To do so, I came up with an approach very similar to Method 1 in this Stack Overflow answer, the only difference being that instead of inserting a new script element directly in the document, the extension creates an ìframe with a src attribute pointing to a HTML document that already contains such a script tag. This approach is convenient in my use case as this newly created iframe and HTML document are also used for other purposes, but this is not relevant to the minimal reproducible example showcased here.
Here's the code responsible for creating the iframe, executed via a content script content.js:
const iframe = document.createElement("iframe");
iframe.setAttribute("src", chrome.runtime.getURL("inject.html"));
document.body.insertBefore(iframe, document.body.firstChild);
Here is a simplified version of inject.html:
<!DOCTYPE html>
<html>
<body>
<script src="inject.js"></script>
</body>
</html>
Here is inject.js (which in reality contains code accessing the global properties of the page):
console.log("Loaded!");
Finally, manifest.json sets both inject.js and inject.html as web accessible resources and injects content.js in all pages:
{
"name": "Example",
"version": "0.0.1",
"author": "Pyves",
"content_scripts": [
{
"all_frames": true,
"matches": [
"<all_urls>"
],
"js": [
"content.js"
]
}
],
"web_accessible_resources": [
"inject.html",
"inject.js"
],
"manifest_version": 2
}
The extension is in particular targeting GitHub raw pages (for instance https://raw.githubusercontent.com/PyvesB/JavAssembly/master/README.md), which happen to have a sandbox Content Security Policy. So far this setup has been working like a charm, however since updating my Chromium-based browsers from version 63 to 64 earlier this month, the extension is no longer fully functional. inject.js is blocked, with the following error message in the browser's console:
Blocked script execution in 'chrome-extension://xxxx/inject.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
Am I missing something here? How can I once again inject extension scripts in sandboxed frames in Chromium 64+?
I'm building my first chrome extension, and I'm running into a very basic problem.
My extension has a background script running all the time, that redirects the url of a webpage to a local web page if certain conditions are met.
chrome.tabs.update(e.tabId,
{url: "popup.html"});
Popup.html is loaded into the tab. This works fine, but I want to include some javascript in popup.html.
I'm able to include a popup.js file, but trying document.addEventListener doesn't work, because document is null.
Also, when I try to include jquery.js, I get
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
I tried updating the manifest file properties to this, but it didn't seem to help:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["background.js", "jquery.min.js", "popup.js"]
}
],
"permissions": [
"tabs", "http://*/*", "https://*/*",
"webNavigation"
],
"background": {
"scripts": ["background.js", "popup.js", "jquery.min.js"]
}
I looked into this document http://developer.chrome.com/stable/extensions/contentSecurityPolicy.html but it didn't have any solution. Any ideas?
I, that error says you are running a inline script directly in a tag in your HTML document, or in a event handler like onclick="myCode();". Content Security Policy prevent you to do so.
I don't know if it's you who wrote that script, or if it is some external framework. Nevertheless, you should assure you don't have inline code in popup.html, or you should relax your Content Security Policy allowing inline scripts with 'unsafe-inline'.
Remember that when relaxing security policy, you are relaxing SECURITY, and your code is more vulnerable to attacks. Do it with debug purpose, but try to remove it from your release version.
Manifest version 2 of chrome extensions will no longer support use of eval or new Function on regular extension pages. My chrome extension uses a UI Framework (Kendo UI) on the options page that makes use of these mechanisms and therefore I'm looking for a solution.
According to this session from IO 2012 the idea is to put the corresponding page into a sandbox and load it into the extension via an iframe.
Here is a simplified example what I'm trying to do: https://gist.github.com/3058943
manifest.json:
{
"name": "Sandbox test",
"manifest_version": 2,
"options_page": "main.html",
"sandbox": {
"pages": [ "index.html" ]
}
}
main.html:
<html>
<head></head>
<body>
<iframe id="iframe" src="index.html" ></iframe>
</body>
</html>
index.html:
<html>
<head></head>
<body>
<h1>Inside the sandbox</h1>
</body>
</html>
When I load the options page in this example, I'm getting the error message:
Denying load of chrome-extension://fahdnpkbgfjkocogbjlljfbhnljcehoh/index.html. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by web pages.
I don't think that each sandboxed page is also supposed to be a web_accessible_resources.
But even when I try to define the sandboxed pages also as web_accessible_resources in the manifest file, then the sandboxed page gets loaded but use of new Function inside the iframe is still blocked.
The above described error message occurs on Chrome 20.0.1132.47.
I tested with the dev channel version 21.0.1180.15 and here the sandboxed iframe loads without problems.
I just made a Chrome extension. I followed this tutorial to get a nice button in my toolbar. Now if I load a page, the javascript in my extension gets executed.
Unfortunately, if I click the extension's button in my toolbar, nothing happens.
Question: How do I make the js get executed when I click the extension's button in my toolbar?
Thanks for your help.
Edit
I added background.html and it still doesn't work:
<html>
<head>
<script>
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
var action_url = "javascript:mathjax.js";
chrome.tabs.update(tab.id, {url: action_url});
});
</script>
</head>
</html>
You have two options. Either, you can specify a "popup": "popup.html" in your manifest.json, then put the code in popup.html. In this case, the code will get executed in the popup (though of course you can communicate with your background page or anything else).
Probably better would be to put a callback in background.html by attaching a listener to chrome.browserAction.onClicked.
Chrome extension doesn't support inline javascript code in background.html.You must specify external javascript file.Also instead of specifying background.html you can directly specify external file in manifest file in background property.
I have answered similar question here.