How to run content script code on an HTML file locally hosted by Google Chrome Extension? [duplicate] - google-chrome-extension

I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?

No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).

I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.

It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.

You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}

Related

WAMP and BrowserSync when XDebug outputs errors

I have WAMP installed and it has XDebug showing me PHP errors in the browser.
I also use BrowserSync with Grunt to have the page reloaded when there are changes in the code. So, I have this kind of PHP file:
<?php
bad_code_here
echo "<html><head><title>Test</title></head><body></body></html>";
?>
The problem is that BrowserSync will not automatically refresh the page when there are PHP errors. BrowserSync needs a <head> and <body> tags, where a JavaScript for refreshing the page is inserted. XDebug doesn't create such tags, so, if there are fatal errors the page will not be refreshed after I correct them.
In order to fix this I wonder if I can:
change the template used by XDebug in such a way that there will always be a <head> and <body> tag. I cannot find the HTML files used by XDebug. Is this possible?
make my code generate such tags but only when there are errors (I don't know if PHP provides such an option, of saying: anytime the code fails generate this header and HTML)
Are there any other options?

Using LESS in a Chrome Extension

I'm attempting to use LESS in a tab created via a Chrome extension (chrome.tabs.create), but I'm getting a cross domain error ("NETWORK_ERR: XMLHttpRequest Exception 101"), referring to the LESS JavaScript file. I'm not clear on how to set up the permissions. Adding the LESS JavaScript file to "web_accessible_resources" doesn't seem to help. All other files, such as css and js files load fine. It seems I only receive this error from within the less source. Any ideas?
To explain my setup a bit more, the LESS JavaScript file and .less file are loaded in an HTML file something like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" href="static/css/main.less">
<script src="/static/js/jquery-1.8.2.min.js"></script>
</head>
<body>
Whatever...
</body>
</html>
This html file is loaded in background.js like this:
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'mypage.html'})
});
The manifest file has permissions for "tabs" and "all urls", and loads background.js.
I'm not sure where you include the client side less.js compiler. See also: http://lesscss.org/#client-side-usage. Less.js is a client-side javascript. It seems the less.js loads from an other URL (domain) than your main.less file. This can be fixed by enabeling CORS, see: http://enable-cors.org/. On the domain where home.less has been installed, the server should send an Access-Control-Allow-Origin: * header.
less.js loads the less files with a XMLHttpRequests which supports CORS for most modern browsers see http://caniuse.com/#search=cors. More details can be found at http://www.html5rocks.com/en/tutorials/cors/
For development use less.js from local folder.
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
for release use any less compiler like lessc.

Port error while changing chrome extension from manifest v1 to v2

While attempting to port the extension from manifest version 1 to version 2, this appeared:
Port error: Could not establish connection. Receiving end does not
exist. chromeHidden.Port.dispatchOnDisconnect
miscellaneous_bindings:232
This appeared in Console in developer tools. I have no idea where to start fixing this cause i don't know what's causing it to begin with..
what can cause this problem? and is there someway to know exactly what's causing it?
Thanks.
The most likely cause of failure is the activation of the default Content security policy when "manifest_version": 2 is active. A consequence of the default CSP is that inline JavaScript will not be executed.
<script>chrome.extension.onConnect.addListener(...);</script>
The previous line is an example of inline code. The solution is to place the script in an external JS file:
<script src="script.js"><!--original contents moved to script.js--></script>
Background pages/scripts
When you were using background pages, do not use:
"background_page": "background.htm", or
"background": {"page": "background.htm"},
but
"background": {"scripts": ["background.js"]}
where background.js contains the script which was initially placed within the <script> tags at background.htm.
Inline event listeners
Browser action popups, app launchers, option pages, etc. often contain inline event listeners. By the CSP, these are also forbidden.
<button onclick="test();"> does not work. The solution is to add the event in an external JS file using addEventListener. Have a look at the documentation or this answer for an example.
Other
JavaScript creation from strings (eval, Function, setTimeout, ...) is forbidden. Rewrite your code to not create code from strings, or use the sandbox manifest option (introduced in Chrome 21). Since Chrome 22, the unsafe-eval CSP policy can be used to lift this restriction.
JSONP does not work, because external (JavaScript) resources cannot be loaded in the extension's context. Use an ordinary XMLHttpRequest instead of JSONP (more information + example).
The only exception is when the resource is fetched over httpsnot http. The CSP can be adjusted to introduce this exception - see documentation:
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
Official documentation
The official documentation also provides an excellent explanation on the topic, see "Tutorial: Migrate to Manifest V2".
For me solution was changing:
<script type="text/javascript" src="bgScript.js"></script>
to:
<script src="bgScript.js"></script>
Maybe it's also help others!

Using sandboxed pages in chrome extensions

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.

Does content_scripts matches "chrome-extension://*/*" work?

I want to run a content script on an iframe with a chrome-extension:// URL. I added a line to my manifest.json that I copied out of the documentation http://code.google.com/chrome/extensions/match_patterns.html
chrome-extension://*/*
But when I reload my extension I get an alert:
Could not load extension from '/work/sirius/extension'.
Invalid value for 'content_scripts[2].matches[0]': Invalid scheme.
Any idea how to get this to worK?
No. Only ftp:, file:, http: and https: can be matched by a content script declaration.
Invalid URL patterns at any of the matches and exclude_matches fields are rejected (generating an error when trying to load the extension).
Invalid patterns at the permissions option in the manifest file are ignored.
If you want to run a script on a tab from your extension, use chrome.extension.getViews in your background script.
Even better, design your extension's pages such that they effectively communicate with each other (example).
I'm having the exact same problem, look at the API http://code.google.com/chrome/extensions/match_patterns.html it says clearly that they accept chrome-extension://*/* yet they don't.
They need to update the API so as not to confuse people.
It seems that Chrome authors have silently removed the ability for content scripts to be injected into chrome-extension: pages. Documentation still says that it works and even contains examples with chrome-extension: scheme but actually it doesn't work. So now only http:, https: and ftp: work "from the box" and file: can work if user of your extension has enabled this on Extensions (chrome://extensions/) page.
Update: now documentation referred above is updated and says nothing about ability to inject content scripts to chrome-extension: pages.
You can inject js to your iframe html(chrome-extension: pages) without declaring it in manifast.json. The injected js can visit Chrome APIs directly.
iframe.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
<script src="iframe.js"></script>
</html>
iframe.js:
console.log(chrome); // {loadTimes: ƒ, csi: ƒ, …}

Resources