I'd like to try my hand at some Chrome Extension Development. The most I have done with extensions is writing some small Greasemonkey scripts in the past.
I would like to use localStorage to store some data and then reveal the data on a extension button click later on. (Its seems like this would be done with a popup page)
How do I run a script everytime a page from lets say http://www.facebook.com/* is loaded?
How do I get access to the page? I think based off my localStorage requirement I would have to go down the background_page route (correct?) Can the background page and popup page communicate across the localStorage?
UPDATE:
I'm actually looking to learn the "Chrome way". I'm not really looking to run an existing Greasemonkey script
Google actually has some pretty good documentation on creating extensions. I recommend thoroughly reading the following two articles if you haven't already done so:
http://code.google.com/chrome/extensions/getstarted.html
http://code.google.com/chrome/extensions/overview.html
If you want to give your extension access when the user browses to Facebook, you'll need to declare that in the extension's manifest.
Unless you're wanting to save data beyond the life of the browser process, you probably don't need to use local storage. In-memory data can just be stored as part of the background page.
Content scripts (which run when you load a page) and background pages (which exist for the duration of the browser process) can communicate via message passing, which is described here:
http://code.google.com/chrome/extensions/messaging.html
Overall, I'd suggest spending some time browsing the Developer's Guide and becoming familiar with the concepts and examples.
Chrome has a feature to automatically convert greasemonkey scripts to extensions!
Related
I want to create a web app(for practicing my skills) that will help in conducting online exams. So I want to ask that is there any way to find out the following things---
Is there another page opened in the chrome (if yes then which)
Is there is another application running in the background (if yes then which)
Is user switching between tabs/applications/desktops etc.
Basically, I just want to create an app that just keeps track of users' activity when the user is giving an exam.
And if you have any of the solutions to the above problems then please tell.
Since most things you want to access are considered private data, it is not directly possible in a Web App, except the page visibility. But you can write a browser extension, which is at least allowed to access data within the browser. For information beyond the browser you should consider a native application or some embedded solution like React Native, Xamarin, or Electron, to name a few.
To get the info if the user is currently using the tab your Web App is running in, use the Page Visibility API:
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
For accessing information about other tabs and browser internal stuff, write an extension:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API
So, I am working on a project(building a chrome extension) that requires data to be stored on the local machine of the user. The size of data is quite large hence I thought of using IndexDB for this purpose.
My Question is whether is it possible to connect a chrome extension with IndexDB and query the database at the same time??
If Yes, Then how can I integrate them. In which file(popup.js or background.js or any other file) should I include the source code for creating the database.
I want the code for creating the database to run only once. After that I only want to update or delete data only.
If No, then is there any other way to achieve this?? The data is large hence I cannot store data in local storage.
Any paper, online material, advice or method from chrome developers or any other valid site would be helpful. Any example would help me alot.
Thankyou.
You can store tons of data in any HTML5 storage (including IndexedDB or localStorage) and chrome.storage.local with "unlimitedStorage" permission.
HTML5 data is stored per URL origin and each extension has its own one that looks like chrome-extension://id where id is a 32-character string that is the extension's id. In Firefox the origin looks like moz-extension://id.
Extension's own HTML5 storage:
can be accessed in any extension page (popup, options, background) just like you would do it in a web page, there are no differences.
cannot be accessed in a content script as it runs in a web page and thus can only access HTML5 storage of the web page's URL origin.
chrome.storage.local can be accessed in any extension page and in a content script.
No need for special event to create/upgrade your IndexedDB storage - it'll happen automatically if needed - simply open it as shown in the documentation whenever you need to access it and your onupgradeneeded callback will be invoked in case there was no DB or it was outdated.
Use a wrapper library for IndexedDB that provides a simplified syntax. Some are listed in the documentation, but you can probably find better ones yourself.
I am developing an app using Phalcon and would like to create a popup logging window that displays any logging type information when I am logged in (such as DB calls and exceptions).
Alot of my app is driven by Ajax calls. Is it going to be possible to have a window that I can popup on my main app that uses a tail like method of displaying this information?
How would I go about this? I'm not entirely sure that what I want is possible with the Ajax calls as they are done in a different request. I can't find anything on the internet as to how I would go about this so any help would be great.
Well, you didn't said that explicitly, but I imagine that you want this just for development purposes. If so, you can log useful info to a method that checks if it should send that log to the browser based on some criteria (e.g. logged in user is you, the app is in a dev enviroment, etc) and then use Phalcon's FirePHP log adapter to send to log the information to the browser.
You'll just need to have some FirePHP extension in your Firefox or Chrome to be able to see the information under your JavaScript console. And yes, it works well with Ajax calls too.
Let me know if you need further explanations on this...
I think you are looking for a debug toolkit.. There are lot of toolkit available on packagist.org and phalconist.com. I personally like this phalcon-debug-widget toolkit that you may try.
I'm trying to control the size and position of newly spawned Google Chrome windows via the command line (through C#.)
My command line ends up looking like:
--new-window --window-position=100,100 --window-size=800,600 www.UrlToOpen.com
However, the new window just opens over top of where the last Chrome window was started.
The end result I'm looking for is to be able to start multiple instances of Google Chrome, in separate windows, with a specific location and size. The only way I've been able to do this so far is by specifying that each instance is to have it's own --user-data-dir. However, this is not ideal given how many extensions a user may have installed, and it would not be the best user experience.
Does anyone have any suggestions?
If Chrome is not programmed to allow this, you only have one option.
Create the process and keep the process object.
Use Process.MainWindowHandle to get the newly created window (you might need to use a loop and Process.Refresh, or Process.WaitForInputIdle)
Use the SetWindowPos native function to position the window wherever you want it.
Native hooks could be used to detect creation of the window, but that requires you to create an unmanaged DLL.
I have another idea for you, why not use a chrome extension for handling the positioning.
Background: We had related difficulties. Internal webapp that opens multiple documents in windows, and need to be placed in other monitors.
The javascript does not support this, for security reasons and only a native extension can properly work with the tabs/windows objects.
Therefore, we have created an open source chrome extension for doing exactly that: flexible windows position across multi-monitor setups.
Perhaps more interest to you would be the feature to use predefine templates. The template file is located in any webserver you like and therefore can be easily share across different users.
The chrome extension is called "MultiWindow Positioner" and its complete free. You can get it at the chrome store here
The actual source code you find in github in the project chrome-multiwindow-positioner
Disclaimer: I am the maintainer of the open source (MIT) github project. If there any interesting idea, or comments feel free to share them here.
I am building an extension for Chrome which gives the user a basic API. I would like for other developers to have the ability to add functions of their own to my API. For example, some developers offer a new "plugin" (which is only JavaScript code), and I want users to be able to download that plugin into their extension.
The main problem I'm facing is this:
How do you load new code into an extension permanently?
Ideally I would like to add code into the extension's JavaScript, but I have no way to write to the file; I am under the impression that I am restricted by JavaScript - is this true?
While I could perhaps load new code dynamically (by downloading some script), that code will only hold for the current run, and is not added permanently. Rather, it is gone once the user reloads the extension.
The only solution I can see so far is to create a login system where I save each user's downloaded plugins and give him the mandatory option to load them every time he opens the extension.
This method is very messy and impractical, because I don't want to make a user login every time. In fact, I would very much like to refrain from using any login system whatsoever.
What I desire is something similar to what the GreaseMonkey extension does, which is the ability to let users write scripts and allow other users to be able to download them.
I'm obviously looking to create an extension which is much smaller and simpler than GreaseMonkey, but something like GreaseMonkey is more or less what I am looking for.
Any thoughts or suggestions?
All of the "plugins" will be independent chrome extensions. You can then use Message Passing to send a message to every installed extension and the ones that are plugins should have code that goes something like:
if recieve "some identifying key"
then respond "information about this plugin"
Now your main extension knows what plugins are installed and can load their JS files using chrome-extension://[extensionID]/file.js".
That should get you started :)