I created an extension for Chrome. I need to allow the user to change a javascript file within the extension for various reasons. When the whatever.js file is changed at C:\Users\\AppData\Local\Google\Chrome\User Data\Default\Extensions\cidaekdakljdsijofjahinafcafmanb\6.0.5_0\whatever.js Chrome comes back with "This extension may have been corrupted." and I have to reinstall the extension.
How do I stop this? How do I allow the changing of javascript file? I'm just trying to set a variable. Can I include a text file and change that instead? Under what circumstances can I get Chrome to stop doing this?
Can I add a user script? whatever.user.js? I read about that somewhere.
Thanks.
You can fix it by following proper development practices. If you are making the user edit the code to charge a variable, thats a huge coding issue.
Instead it should be changeable with a user interface, for example in the extension options page. If you want full control of the option, download it from a server or read it from a web accesible extension resource json file. here is an example that reads from such file since you asked it in comments:
var url = chrome.extension.getURL("options.json"); //in manifest under web_accessible_resources
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var options=null;
try {
options = JSON.parse(xhr.responseText);
}
catch (e) {
console.log("error: cant parse options.");
}
if (options) {
//got it!
}
}
};
xhr.open("GET", url);
xhr.send();
this also simplifies a lot the user experience and possible user errors. just the fact that each OS stores and caches the code differently would be a nightmare to support.
and no, you cant bypass that chrome security measure meant to protect users from i.e. viruses modifying the extension source code.
Related
I'm currently creating an extension for google chrome which can save all images or links to images on the harddrive.
The problem is I don't know how to save file on disk with JS or with Google Chrome Extension API.
Have you got an idea ?
You can use HTML5 FileSystem features to write to disk using the Download API. That is the only way to download files to disk and it is limited.
You could take a look at NPAPI plugin. Another way to do what you need is simply send a request to an external website via XHR POST and then another GET request to retrieve the file back which will appear as a save file dialog.
For example, for my browser extension My Hangouts I created a utility to download a photo from HTML5 Canvas directly to disk. You can take a look at the code here capture_gallery_downloader.js the code that does that is:
var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
var a = document.createElement('a');
a.download = 'MyHangouts-MomentCapture.jpg';
a.href = url.createObjectURL(dataURIToBlob(data.active, 'jpg'));
a.textContent = 'Click here to download!';
a.dataset.downloadurl = ['jpg', a.download, a.href].join(':');
If you would like the implementation of converting a URI to a Blob in HTML5 here is how I did it:
/**
* Converts the Data Image URI to a Blob.
*
* #param {string} dataURI base64 data image URI.
* #param {string} mimetype the image mimetype.
*/
var dataURIToBlob = function(dataURI, mimetype) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var bb = new this.BlobBuilder();
bb.append(uInt8Array.buffer);
return bb.getBlob(mimetype);
};
Then after the user clicks on the download button, it will use the "download" HTML5 File API to download the blob URI into a file.
I had long been wishing to make a chrome extension for myself to batch download images. Yet every time I got frustrated because the only seemingly applicable option is NPAPI, which both chrome and firefox seem to have not desire in supporting any longer.
I suggest those who still wanted to implement 'save-file-on-disk' functionality to have a look at this Stackoverflow post, the comment below this post help me a lot.
Now since chrome 31+, the chrome.downloads API became stable. We can use it to programmatically download file. If the user didn't set the ask me before every download advance option in chrome setting, we can save file without prompting user to confirm!
Here is what I use (at extension's background page):
// remember to add "permissions": ["downloads"] to manifest.json
// this snippet is inside a onMessage() listener function
var imgurl = "https://www.google.com.hk/images/srpr/logo11w.png";
chrome.downloads.download({url:imgurl},function(downloadId){
console.log("download begin, the downId is:" + downloadId);
});
Though it's a pity that chrome still doesn't provide an Event when the download completes.chrome.downloads.download's callback function is called when the download begin successfully (not on completed)
The Official documentation about chrome.downloadsis here.
It's not my original idea about the solution, but I posted here hoping that it may be of some use to someone.
There's no way that I know of to silently save files to the user's drive, which is what it seems like you're hoping to do. I think you can ASK for files to be saved one at a time (prompting the user each time) using something like:
function saveAsMe (filename)
{
document.execCommand('SaveAs',null,filename)
}
If you wanted to only prompt the user once, you could grab all the images silently, zip them up in a bundle, then have the user download that. This might mean doing XmlHttpRequest on all the files, zipping them in Javascript, UPLOADING them to a staging area, and then asking the user if they would like to download the zip file. Sounds absurd, I know.
There are local storage options in the browser, but they are only for the developer's use, within the sandbox, as far as I know. (e.g. Gmail offline caching.) See recent announcements from Google like this one.
Google Webstore
Github
I made an extension that does something like this, if anyone here is still interested.
It uses an XMLHTTPRequest to grab the object, which in this case is presumed to be an image, then makes an ObjectURL to it, a link to that ObjectUrl, and clicks on the imaginary link.
Consider using the HTML5 FileSystem features that make writing to files possible using Javascript.
Looks like reading and writing files from browsers has become possible. Some newer Chromium based browsers can use the "Native File System API". This 2020 blog post shows code examples of reading from and writing to the local file system with JavaScript.
https://blog.merzlabs.com/posts/native-file-system/
This link shows which browsers support the Native File System API.
https://caniuse.com/native-filesystem-api
Since Javascript hitch-hikes to your computer with webpages from just about anywhere, it would be dangerous to give it the ability to write to your disk.
It's not allowed. Are you thinking that the Chrome extension will require user interaction? Otherwise it might fall into the same category.
I'm developing a Browser (Chrome, Firefox) extension with react with Manifest v3.
In my app, I have a search bar where I show suggested words based on the value typed by the user (like search engine do).
In manifest v2, I used to load this script like so:
"content_security_policy": "script-src 'self' https://suggest.finditnowonline.com; object-src 'self'"
In v3 this is not supprted anymore but I cannot find the way how I could still make my code work.
he most relevant resource I found online are this answer: Content Security Policy in Manifest V3 for Facebook Page Plugin
and this documentation: https://www.chromium.org/Home/chromium-security/extension-content-script-fetches
But I cannot understand how I can implement my script from the background.js page since It needs to fetch the API dynamically, every time the user type something in the input field.
This is the react code: where I fetch the api
useEffect(() => {
const fetchSuggestedWords = async () => {
try {
const res = await fetchJsonp(`${process.env.SUGGESTED_WORDS_URL}${searchValue}`)
const suggestedWordsArray = await res.json()
setSuggestedWords(suggestedWordsArray[1].slice(0, 10))
return
} catch {
console.log('error fetching suggested results')
}
}
if (searchSuggestedWords) {
fetchSuggestedWords()
}
}, [searchValue])
Where searchValue is a state update whenever the onChange event is trigger on the input field.
Any tips on how to approach this new format?
Would people recommend not switching to Manifest v3 just yet?
From what I gathered, you're trying to talk to an api and not load an external script.
If you're trying to load external, that will not work.
Fetching data on the other hand has multitudes of ways it can be done, not all are proper though.
Also I've noticed that you're misunderstanding the core keys of the async messaging system and service worker cycle.
Add a service worker
*Background.js or svc-worker.js
and give it a on message listener, try to at least handle messaging between your extension, if you're not sure, you can always get an example on github.
After that, it's a matter of setting the CSP and optimizing where you'll be fetching the data.
After a little while, I'm sure you'll get the hang of it.
the code in content should be like
content.js
inputElement.oninput = (e) => {let input = e.target.value;
chrome.runtime.sendMessage({Origin: 'Content', Message: input})};
Handle the message in svc worker
svc-worker.js formatted
chrome.runtime.onMessage(request => {
const {Origin, Message} = request
// parse message
// fetch chain here
})
Please note, this is not the only way to handle this.
There's a billion different ways, if you want to add some of this data in a use Effect hook as a dependency, that's going to be tricky, as the data given obtained is always counted as different when obtained via message. < At least in my case scenario.
I'm working on a chrome extension which must get in touch with some apis.
The first version had this permission in the manifest :
"permissions": [ "API_1" ],
And I could contact this API:
var xhr = new XMLHttpRequest();
xhr.open('GET', "API_1" + someArguments, true);
xhr.onreadystatechange = function()
{
// ...
}
This version is already published, but now I need my extension to contact another API, so I'm using the same code with the new API:
var xhr = new XMLHttpRequest();
xhr.open('GET', "API_2" + someArguments, true);
xhr.onreadystatechange = function()
{
// ...
}
In this new version I don't have any warning or error whatever there is no permission for "API_2". If I add permission for API_2, installed extensions will be disabled on update. So my question is : Are permissions for API_1 and API_2 really mandatory?
If that's all you're using the API host permission for, it depends on exactly one thing: CORS policy of the remote server.
When making XHR requests, if the request is cross-domain (which, from an extension, always except for content scripts on that same domain) - Chrome will examine CORS headers in server's reply.
By default, if the server does not indicate anything, cross-domain requests are not allowed by the web security model. This is typical if you're requesting something that was never intended to be a public API. Listing the API match pattern in permissions overrides this.
However, for public API it is typical to include a permissive CORS header (after all, other web applications that may use this API cannot override the security model, only extensions can). In that case, the permission is not necessary.
Its hard to know without listing the API's, but google's documentation provides a simple way to check how new permissions will affect warnings:
If you'd like to see exactly which warnings your users will get, package your extension into a .crx file, and install it.
To see the warnings users will get when your extension is autoupdated, you can go to a little more trouble and set up an autoupdate server. To do this, first create an update manifest and point to it from your extension, using the "update_url" key (see Autoupdating). Next, package the extension into a new .crx file, and install the app from this .crx file. Now, change the extension's manifest to contain the new permissions, and repackage the extension. Finally, update the extension (and all other extensions that have outstanding updates) by clicking the chrome://extensions page's Update extensions now button.
Basically, create two test extensions, one being your original and another being your updated. Follow this process to go through a simulated update, and you will see what warnings you get, if any.
If you leave out API_2 permissions in the update and everything is fine, then its permissions are not mandatory to include in the manifest.
Source
It seems like the externally_connectable feature that allows a website to communicate with an extension is still in the dev channel and not yet stable. Are there any other ways to allow a specific website to communicate with my extension, while I wait for this feature to become stable? How have chrome extension developers traditionally done it?
Thanks Rob W for pointing me in the direction of HTML5 messaging. For the benefit of other chrome extension developers, I'm writing about the general problem I was trying to solve and the solution that worked in the end.
I am making a chrome extension that can control music playback on a tab via a popup player. When a user clicks on play/pause/etc on the popup player, the extension should be able to convey that message to the webpage and get back a response stating whether the action was accomplished.
My first approach was to inject a content script into the music player page. The problem is, though, that content scripts operate in a "sandbox" and cannot access native javascript on the page. Therefore, the content script was pretty useless (on its own), because while it could receive commands from the extension, it could not effect any change on the webpage itself.
One thing that worked in my favor was that the website where the music was playing belongs to me, so I could put whatever javascript I wanted there and have it be served from the server. That's exactly what I used to my advantage: I created another javascript file that would reside on the website and communicate with the content script mentioned above, via the window object of the page (i.e. HTML5 messaging). This only works because the content script and the javascript file both exist in the same webpage and can share the window object of the page. Thanks Rob W for pointing me to this capability. Here is an example of how the javascript file on the page can initiate a connection with the content script via the window object:
content_script.js (injected by extension into xyz.com):
window.addEventListener("message", function(event) {
if(event.data.secret_key &&
(event.data.secret_key === "my_secret_key") &&
event.data.source === "page"){
if(event.data.type){
switch(event.data.type) {
case 'init':
console.log("received connection request from page");
window.postMessage({source: "content_script", type: 'init',
secret_key: "my_secret_key"}, "*");
break;
}
}
}
}, false);
onpage.js (resides on server and served along with xyz.com):
window.postMessage({source: "page", type: 'init',
secret_key: "my_secret_key"}, "*");
window.addEventListener("message", function(event) {
if(event.data.secret_key &&
(event.data.secret_key === "my_secret_key") &&
event.data.source === "content_script"){
if(event.data.type){
switch(event.data.type) {
case 'init':
console.log("connection established");
break;
}
}
}
}, false);
I check the secret key just to make sure that the message originates from where I expect it to.
That's it! If anything is unclear, or if you have any questions, feel free to follow up!
You could have an extension inject a content script alongside a web page, and use that to pass messages back and forth between the website and the background page of the extension.
It's tedious, though, and externally connectable is a lot nicer.
I suspect this is a total newbie question, but I seem to be missing the basics here. I am NOT new to coding and have a lifetime of experience (27 years) with various languages, but the plugin process is eluding me.
I have developed custom bookmarking system in php & js, it works great and I've been using it for months as I develop it.
I simply want to get the url of the page in the active tab and pass it to my php handler. I want my web site script return the html form into the popup. I can think of a thousand ways that "should" work.
ALL the code examples I am finding seem to over-complicate what should be a simple task.
In short I just want:
<script type="text/javascript">
<!--
var loadurl = "http://my.site.com?theUrl=" + window.location;
location.href = loadurl;
//-->
</script>
And have that page show in the popup. So far I'm at a loss. Even tried ajax calls etc.
Can somebody clue me in on how to achieve this simple task? Maybe I can get started writing extensions with the info.
For the record, most of the examples I have found are deprecated under manifest 2.0
Manifest 2.0 introduces a new feature contentSecurityPolicy. All external resources are blocked by default. For the best practice, you should include all needed asset files in the extension. The communication between your extension and your service (php side) is only data using XHR2.
So, In order to make bookmark extension work, I guess you need to something like this:
Add your service's domain to permissions array
{
...
permissions: ['*://my.site.com/*', 'tabs']
}
Move all javascript from popup.html to popup.js. In popup.js, You create a ajax request to your bookmarking service. More document here
function addBookmark(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://my.site.com/new_bookmark.php?url=" + encodeURIComponent(url), true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var resp = xhr.responseText;
// handle service result here
}
}
xhr.send();
}
chrome.tabs.getSelected(null,function(tab) {
addBookmark(tab.url);
});