Previously I have loaded facebook comment plugin in side my chrmoe extension with manifest version 01. Now I updated version to manifest version 02 and then I have to do couple of changers in my extension code base.
According to the new version we can not load the external js file without specifying external resources associate with "content_security_policy". Anyway this is my new manifest.json file,
{
"name": "",
"version": "1.13",
"manifest_version": 2,
"description": "",
"background": "background.html",
"icons": { "128": "fb_bug.gif" },
"content_security_policy": "script-src 'self' https://connect.facebook.net/; object-src 'self'",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "plugin_content.html"
},
"permissions": [
"tabs",
"background",
"cookies"
],"web_accessible_resources": [
"css/extension.css",
"js/config.js",
"js/jquery-1.6.1.min.js"
"js/extension.js",
"images/loaderImg.gif",
"https://connect.facebook.net/en_US/all.js"
]
}
Now when I load the extension it raises a following error and facebook social plugin is not working.
"error: Code generation from strings disallowed for this context all.js:41"
Is there anyone who know solution for this matter.
sorry it took so long to reply to this.
I'm an Engineer at Facebook and tried looking at alternatives to remove the one Function() we use in the SDK, but unfortunately there is no way to reliably remove it without breaking functionality. Other seem to have the same problem and I didn't find anyone that was able to solve this issue in an efficient way.
However, according to this comment on the Chromium issue tracker (http://code.google.com/p/chromium/issues/detail?id=107538#c69), you should be able to solve this by adding a content_security_policy attribute to your manifest that whitelists 'unsafe-eval' for script-src:
{
...
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
...
}
Related
I'd like to have users authenticate into a service from within my popup.html browser extension, but the url for the service they use can't be predefined (e.g. different servers are at different URLs) and the authentication must be over HTTPS. Currently they enter the url of their server and I open a new window, monitor the url, and grab the Auth key from the url and close the tab, But I'd prefer to just load the mobile view of the site inside the extension for a more seamless experience.
My understanding is that this may not be possible due to xss and previous ways of using an iframe to do this will no longer be approved by Google/Mozilla.
Any workaround?
You can do this in your Chrome extension Manifest V3:
manifest.json file
{
"manifest_version": 3,
"name": "__MSG_name__",
"version": "1.0",
"description": "__MSG_description__",
"icons": {
"16": "icons/icon16.png",
"24": "icons/icon24.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"96": "icons/icon96.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"action": {
"default_title": "__MSG_pageatitle__",
"default_icon": {
"19": "icons/icon19.png",
"38": "icons/icon38.png"
}
},
"content_security_policy": {
"extension_pages": "default-src 'none'; style-src 'self'; child-src https://www.youtube.com; script-src 'self'; img-src 'self'; object-src 'none'"
},
"permissions": ["tabs"],
"host_permissions": ["<all_urls>"]
}
popup.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<iframe id="login" title="Login box" src="https://www.youtube.com/watch?v=SlGuvC5nnTA" width="100%" height="100%" frameBorder="0" scrolling="no">Your browser does not support iframes.</iframe>
</body>
</html>
Signing in users
If you want to use the Signing in users from a Chrome extension, see this Google Cloud documentation:
https://cloud.google.com/identity-platform/docs/web/chrome-extension
Note: This currently only works in the Chrome extension Manifest V2. And not in the latest Chrome extension Manifest V3 technology.
I know there is already stuff about that. i'm on it for several days and read and tried before posting.
1: No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API describes a relevant issue according to my problem. But I can't solve it. I'm on a chrome extension development that performs an ajax request on a dictionary web server and injects some css/html in the current page, to display a tooltip with some data related to the user selection. It works really fine with the 'MOESIF Cors' extension ON in my browser. I want it to work without this extension, with some javascript tweaks or manifest.json good parameters. I'm stuck. I had CORS violation because of the server (I've no access to the server and can't modify its response headers) Access-control-allow-origin policy. I've tried a lot of request headers combinations in my $.ajax/jquery GET-request but nothing works.
Access to XMLHttpRequest at 'https://dictionary.xxx.ie/dictionary/english/government%20' from origin 'https://en.wikipedia.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
According to the article cited above, I've tried to set 'data-type': to 'jsonp' and that replaced the cors policy violation by another violation :
Refused to load the script 'https://dictionary.xxx.ie/dictionary/english/publication?callback=jQuery3600056231503718366715_1615940095416&_=1615940095418' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
There must be a quick fix to this as the MOESIF extension works so fine : I tried all these headers : MOESIF Extension but it doesn't work. I sandboxed my script in the manifest.json after reading the docs (it seems to be more lax) but it hasn't done any better. I'm thinking of embedding a javascript proxy in my extension if such a thing is possible ! Any clue ?
thanks for reading.
Manifest.json
{
"manifest_version": 3,
"name": "Not a translator",
"version": "1.0",
"default_locale": "en",
"background": {
"service_worker": "background.js"
},
"host_permissions": [
"http://dictionary.xxx.ie/*",
"https://dictionary.xxx.ie/*"
],
"permissions": ["storage", "activeTab", "contextMenus", "scripting"],
"sandbox": {
"pages": ["chrome-extension://afeenkbblogndiamnfkocnomlppheomb/jquery.min.js"]
},
"content_security_policy": {
"sandbox":"sandbox allow-scripts; script-src-elem chrome-extension://afeenkbblogndiamnfkocnomlppheomb/jquery.min.js 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
},
"content_scripts":
[{
"matches": ["http://*/*", "https://*/*"],
"css": ["tooltip.css"],
"run_at": "document_start",
"js": ["tooltip.js", "jquery.min.js"]
}],
"externally_connectable": {
"ids": ["afeenkbblogndiamnfkocnomlppheomb"],
"matches": ["https://localhost/*"],
"accepts_tls_channel_id": false
},
"action": {
"default_title": "__MSG_tooltip__",
"default_popup": "popup.htm",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
},
"options_page": "options.htm"
a part of my jquery request from background.js (very large, can't get a runnable version) :
var url1 = "https://dictionary.xxx.ie/dictionary/english/" +
encodeURIComponent(text);
$.ajax({
method: "GET",
url: url1,
crossDomain:true,
dataType: "jsonp",
data: {}
})...
When I inspect the headers of my request I sometime get a 403 forbidden. when I put the 'jsonp' header I've got some 'provisional headers' and nothing else. I think the POST or OPTIONS method used for jsonp gets me some response headers that ban further requests. I don't know which header I can add to solve this. Jquery doesn't allow me to pass a 'Origin': 'http://localhost' for example (for vulnerability reasons).
Remove content_security_policy and sandbox from manifest.json, they won't help here.
Remove jQuery and its calls from background.js, it won't work in ManifestV3 service worker because jQuery is based on DOM things like XMLHttpRequest that aren't present in a service worker.
Solution
in the background script: use fetch .
in the content script, to make a cross-origin request: send a message to the background, which will make a fetch request and send the results back, example.
I'm trying to get my Chrome extension approved and want to understand how I should properly fill in the "permissions" and "csp" sections of the manifest.json. Those parts looks as follows:
...
"permissions": [
"storage",
"http://api.openweathermap.org/data/2.5/weather*"
],
"content_security_policy": "default-src 'self' http://api.openweathermap.org/data/2.5/weather*; script-src 'self'"
...
And that got rejected.
I'm using only:
localStorage to store info about weather;
Openweathermap API to get weather info (JSON).
I don't use any remote scripts.
So, my questions are:
Do I really need a "storage" string if I use localStorage (not a chrome.storage)?
What is a proper way to set a CSP in my case?
When I publish Chrome extension, I get the below warning. I'm not requesting broad host permissions, just permissions on 8 specific domains:
Because of the following issue, your extension may require an in-depth
review:
- Broad host permissions Instead of requesting broad host permissions, consider using the activeTab permission, or specify the sites that
your extension needs access to. Both options are more secure than
allowing full access to an indeterminate number of sites, and they may
help minimize review times.
The activeTab permission allows access to a tab in response to an
explicit user gesture.
{
"manifest_version": 2,
"name": "My Amazing Extension",
"version": "1.3",
"description": "It's great",
"icons": {
"16": "img/icon16.png",
"32": "img/icon32.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"browser_action": {
"default_title": "My Amazing Extensions"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"run_at": "document_start",
"matches": ["*://www.domain.com/*", "*://www.domain.co.uk/*", "*://www.domain.ca/*", "*://www.domain.de/*", "*://www.domain.fr/*", "*://www.domain.es/*", "*://www.domain.it/*", "*://www.domain.in/*"],
"js": ["content0.js"]
}],
"web_accessible_resources": [
"font.css",
"AZSDstyle.css",
"font.woff2",
"img/*"
],
"permissions": [
"activeTab",
"storage",
"*://www.domain.com/*",
"*://www.domain.co.uk/*",
"*://www.domain.ca/*",
"*://www.domain.de/*",
"*://www.domain.fr/*",
"*://www.domain.es/*",
"*://www.domain.it/*",
"*://www.domain.in/*"
],
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}
As #wOxxOm mentions in his comment, it was likely being rejected because the detector is a bit buggy, potentially because of * in the scheme.
In my case the extension was approved within 30 mins which is unusually quick if there had been actual 'broad permissions' issues which in past experience have taken a week or more to be approved.
Replacing *:// with http:// and https:// on separate lines would likely have avoided this error in the first place.
I have a chrome extension that has a reference to the jquery file.
this is my popup html (only the head tag):
<head>
<title>My Extention</title>
<script type="text/javascript" src="http://www.MySite.com/Resources/JS/JQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="MyExtensionScript.js"></script>
</head>
so in "MyExtensionScript.js" i thought i could use jquery but apparently the $ function is not defined.
This is my manifest.json file:
{
"name": "My Test Extension",
"version": "1.0",
"manifest_version": 2,
"description": "Test version of My Extension",
"browser_action": {
"default_icon": "test.ico",
"default_popup": "Test.html"
},
"permissions": [
"cookies",
"tabs",
"<all_urls>"
]
}
in version 1 of the manifest it worked, but now it doesn't. I tried to use the "web_accessible_resources" and add to them "http://www.MySite.com/Resources/JS/JQuery/jquery-1.7.2.min.js" but that didn't work also. any ideas?
also, i have a script injected to the current page and returning me a message (in my case some html source of the current page), will this behavior be affected by the transition to manifest version 2?
Thanks all :)
EDIT: I have a web application that enables cross domain scripting (using JSONP). In my extension i had a script calling a web service in my site with $.getJSON. now it doesn't work. i'm pretty sure that it has to do with the new manifest version but how can i enable again the cross domain scripting?
You need to use a jQuery file stored locally in your extension, rather than referenced from your site.
This is due to Chrome's strict Content Security Policy that only allows local scripts to be executed, with no inline code.
Web Accessible Resources are files inside your extension that may be accessed from the web, rather that resources your extension can access that are on the web. For example, if you wanted to change the background image of a page using an image stored in the extension, you have to add that image to the list in web_accessible_resouces in your manifest.
The change of manifest version should not affect your content scripts, unless they do something that is no longer allowed. You can see what else has changed from the Chrome manifestVersion docs.
I just include jquery in my content scripts. just make sure to load it before your script.
{
"manifest_version": 2,
"default_title": "Babble",
"version": "1.2",
"description": "Chat in your language with friends in their language",
"default_locale": "en",
"default_icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"content_scripts":[
{
"matches": ["http://mail.google.com/*", "https://mail.google.com/*"],
"css" : ["css/style.css"],
"js" : ["js/jquery.js" , "js/translate.js" , "js/jquery.cookie.js"]
}
]
}