I tried following Google's example: https://developer.chrome.com/extensions/options.html
I immediately encountered the problem of the button and body trying to execute functions, so I attached listeners instead. Then, it's telling me that the options page isn't allowed to execute JS.
Either I didn't properly understand how to do that, or Chrome's documentation is entirely wrong.
How do you use JS in there? Or: can you point me in the direction of a proper tutorial.
Check out this answer: Chrome tutorials - options page
"manifest_version": 2 forbids embedded scripts. Move all of the JavaScript to options.js and load it that way."
You can't use inline JS with manifest v2.0 that is required for new extensions. That was possible with manifest v1 but not now. You have to reference script file to page. This issue if present on all extension pages.
<script type="text/javascript">JS CODE</script>
Is not allowed anymore. Use this instead.
<script type="text/javascript" src="FILENAME.js"></script>
Take a look at google code docs - manifest
Related
I wanted to test onUpdateAvailable event in chrome extension.
https://developer.chrome.com/extensions/runtime#method-requestUpdateCheck
I have tried updating the maniefest version but it didn't work.
Can someone help?
You can specify "update_url" in your manifest file which is mapped to your local server and change it when you need.
The URL should be a link to an XML document, you can check example here.
Has anyone successfully implemented drag and drop with files from desktop to the app?
I've tried just putting this drag 'n' drop example into the index file but I just get this error:
Can't open same-window link to "file:///C:/Users....whatever"; try target="_blank".
Please share your stories, what you've tried and if you have succeed :)
Some resources to help you:
New Chrome Packaged Apps codelab that we've been working on covers drag-and-drop in both AngularJS and pure JavaScript.
AngularJS drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_files
JavaScript drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/javascript/2_drop_files
There's an early version of docs too for AngularJS drag-and-drop for Chrome at developer.chrome.com/trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls
We're working on the docs to cover both samples though.
I have done this a while ago and it worked.
The problem you've got is that you are creating a file url, then trying to navigate to the url. The navigation is failing, not the read. It's failing due to CSP, and you probably won't be able to override that with a different CSP due to security restrictions we've placed on allowable CSPs.
But, you should be able to just read the file and use the content. You need to change that sample code to use ReadAsText or ReadAsArrayBuffer instead of readAsDataURL. Look here for more details.
Please let us know how you get on!
Just listening for drop won't work. You will have to prevent the default functionality of dragover.
document.body.addEventListener('dragover', function(e) {
e.preventDefault();
}
document.body.addEventListener('drop', function(e) {
alert('it works!')
}
I published a chrome extension to testers only. The app seems to work very well. I don't see any errors when inspecting the console for the popup or the background page. However, I get the following error when inspecting the console for any web page: "Uncaught Error: "getBackgroundPage" can only be used in extension processes. See the content scripts documentation for more extensions/schema_generated_bindings.js:418"
This app contains several JavaScript files, but each one includes the code within a self executing function. The "getBackgroundPage" calls are in the JavaScript files.
Could you please help? Isn't the app I built an isolated module independent from any web page? How can I prevent this error from happening?
I had the same error when I was trying to communicate with the background page from my content script. The correct way of doing it is via Message Passing. It is very well documented here : https://developer.chrome.com/extensions/messaging.html
In my Chrome Extension, I am using webkitNotifications.createNotification to alert users. It's a great tool!! In the sample code given, the first parameter is optional and specifies an an icon and the Google instructions claim that it can be a local reference. When I use a local file, I get a broken image link. This even occurs when I use the sample for Notification Demo located here - http://code.google.com/chrome/extensions/samples.html#f799e26ceef2367cf836f24bcb47df4398b0df58
Does anyone else have this issue?
The icon is listed in my manifest file.
I can get around this by using a complete web reference, but I like to use this tool for error notifications and sometimes the error is caused by an interruption of internet access.
I am using chrome version 18.0.1025.151 m.
Thanks!
The problem with their sample is they have included "manifest_version": 2 in their manifest but not added a "web_accessible_resources" listing what resources should be available to pages.
You can read more about manifest_version 2 and what changes it introduces here....
http://code.google.com/chrome/extensions/manifestVersion.html
...and about web_accessible_resources here....
http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources
To fix the problem in the sample, you can either remove the manifest version 2 bit (even the docs say this wont be required for a while yet). Or you can add the following to the manifest....
"web_accessible_resources": [
"48.png"
]
"Web Accessible" means the resources is being accessed from your server so you must make sure to include the path to the resources in your javascript and in the manifest,json.
I am writing a node.js app in coffee-script using the express framework. After exploring a couple of options I finally decided to use mocha and zombie.js. However, I am having a hard testing the UI. For example, to implement a successful user authentication I do the following: see the code pasted here my_gist
What I really wanted to do is the following:
call get '/sessions/new', which will call the SessionsController and display the authentication form
then I'll call the browser.visit method, enter the values for the fields and submit the form, which will generate a post method
if the username and password are correct, I'll expect the SessionsController to react accordingly and redirect to the right page.
Unfortunately, whenever I run the tests it complains about Zombie: require is not defined ReferenceError: require is not defined. It turns out it doesn't like the two lines in my /javascripts/app.js
require("coffee-script")
require('./tfs.coffee')
Even when I try to extract any information from the browser after the visit method, I just get undefined values. Apparently none of my assertions is being tested. It just passes the test. Is there anything I am doing wrong? Has anyone testing coffee-script written app in express using Zombie.js faced that problem? what could be the fix?
If /javascripts/app.js is being loaded from the browser, you would want to make sure that RequireJS (or some other browser framework that defines require) is loaded first, or load them in your HTML document:
<script src="coffee-script.js" type="text/javascript"></script>
<script src="tfs.coffee" type="text/coffee"></script>
You might need to wait until the page is fully loaded before extracting values.