How do pageActions and browserActions differ? - javascript

I'm a writing a chrome extension that allows users to do the following:
Load data into the popup when the icon is clicked
Change the data in the popup based on actions the user takes on the page
Append elements to the DOM of the page based on actions taken in the popup
It seems that I can accomplish 1 with a script in the browser_action field of the manifest, but perhaps I need a page_action script for 2 and 3?
The core of the problem is that I do not know exactly how browser_actions and page_actions differ from each other. My limited understanding is that page actions allow data populated in the popup to be manipulated dynamically. Is this true? I cannot find an explanation about the differences that makes sense to me.

Browser Action is a type of extensions that use icon on the right of address bar. You click on that icon and popup page is loading. Those extensions work regardless of page currently opened.
Page Action only works while certain webpage(s) is opened. It displays as an icon inside the address bar (near page URL). This is for extensions only working on certain websites.
If you want to make your extension working on every website, you should use browser_action.
For further information you may want to visit these pages:
http://developer.chrome.com/extensions/browserAction.html
http://developer.chrome.com/extensions/pageAction.html

Related

Extension bar always visible

I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]

Opening popup in new tab

So I recently implemented a chrome extension to grab images in an active tab and extract them to a popup for downloading. I would like to give users the option to view the popup window (including the extracted images) in a new Chrome tab.
However, since the popup is created dynamically by appending children to the body of my popup.html, I'm not sure how to pass the HTML for my popup to the new chrome tab.
I tried using chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});
as found at Open chrome extension in a new tab
but this doesn't seem to be working. Any suggestions?
I'm also developing a Chrome Extension that involves saving down a user's browser data.
Since each time an Extension opens a page (such as popup.html in your case) it opens a new instance of it, the pages and their relevant activity will be independent from each other.
In short you will have to implement some storage. The silver lining is it's pretty simple. Everything you need from manifest to example functions is here:
https://developer.chrome.com/extensions/storage
In your case what I'd imagine you'd want to do is this:
When you pass image urls to your popup page you also save them as items in an array in storage.
Then your pop up page can load in the array as the list to set downloading (or preview depending on use case).
Then either users can delete items from the array, or they are deleted programatically once downloaded.
I can't really be more specific without knowing exactly what your extension is trying to do or how it works, but hopefully that's enough to set you in the right direction.

Chrome Extension: How to run Javascript on page load (without popup open)

I have a Chrome extension that does word substitutions on pages. Currently I have a popup that opens when I click on a browser action which lets the user control whether or not to perform the substitutions. I also have a background script running that sends a message to content scripts when a page refresh happens using a chrome.tabs.onUpdated event handler.
My problem is that when I refresh the page no substitutions are made unless the popup is open (which is only possible when I have the inspect elements panel open on the popup, because otherwise the popup closes when I refresh).
Has anybody had experience with this behavior before? What additional instrumentation should I add to diagnose the problem? Is there a different extension architecture/code arrangement I should be using?
Thanks in advance!
If you use localStorage on a given page you can probably store whether or not to substitute words. I think refreshing a page is similar to opening a new tab, so your script gets reinjected/reloaded rather than staying open and receiving an onupdate message.

What method should I use to make a Chrome toolbar?

I have this small toolbar-like html page:
Currently, a user clicks on a link and this page opens in a new tab at the size shown. The user places this at the top of their screen then opens another tab below it taking up the rest of their screen. The user mainly works out of the larger window and interacts with this "toolbar" periodically.
This setup is obviously not ideal. Especially since you cant hide the chrome frame or the address bar which make the toolbar twice the height it needs to be.
What I'd like to do is make this an actual tool bar in Chrome, something like:
I did see How to make a toolbar in Google Chrome? but I'm not sure which method would best suit my needs.
A few details:
The toolbar must remain visible anytime its turned on/opened (as I
understand it 'infobars' close themselves when not active? not 100%
on that though)
Navigating to a new page should not close the bar
Navigating to a new page should not reload / render the bar (as I understand it using content scripts would reload the bar every time the user goes to a new page,)
I guess we could use a content scripts / local storage type solution to render the bar then set it up as it was on the previous page, seems hacky though.
Am I missing a better way to do this?
Could anyone help me get started down the right path to achieve this result?
A toolbar is an extension.
use content script. The easiet way would be to download a sample from official google chrome's developper site.. and you will be able to change it the way you want.

chrome extension opens with page load

I need to create a chrome extension that for every web page te he user opens - he will have a button on top of the page (similar to the google translate extension - just that it will appear with page load, without the need to press a button) - preessing on it will do some activity.
from what i saw - the way to do it is to create a content script that will add an iframe that includes the button on the window.onload. just before i do that - i want to be sure there is no more simple way of doing that.
Thanks.
There is an experimental infobar API, but it's unknown when, if ever, it becomes stable.
As-is, you really need to inject your UI into the page DOM from a content script, with an iframe being a good solution to separate your UI from the page.
If it's just a button for each page then you could use a Browser Action
If you'd like for it to actually be in the page then an iframe is a good way to go.

Categories

Resources