Where Did I Come From, A chrome extension and how I made it

One predicament I often find myself in is having 20+ tabs open in chrome and wondering what site I was on when I clicked a link to open the tab I am on. So I made a chrome extension that stores that site for all newly opened tabs. Just click the “w?” button in the top right and it will create a new tab with that url. You can find the link to the extension here and the source code here.

I have never made a browser extension before, but it was pretty simple to do. The chrome API doesn’t have some magic history functions that could accomplish this so I had to store all tab ids and urls. My explanation of how this works will probably be butchered but hopefully someone will find this helpful still.

The first part is the manifest.json file. This stores the basic information of the extension. The “background_page” line tells the extension where are scripts are going to be run from which is background.html. “browser_action” tells the extension that we want a clickable icon and permissions requests from certain permissions from the browser when installed so that we can manipulate protected things.

 

The second part,background.html, is the actual code of the extension. It is written in javascript and listens for actions in chrome. One note, a lot of the chrome api calls are asynchronous so you must go through coding your application assuming that code will finish running whenever it wants to. There is no way to have synchronized and asynchronous code to work together as javascript provides no blocking and it is single threaded so you can’t sit around in a while loop waiting for an asynchronous function to finish.

 

Here’s the first part, whenever our selection changes to a new tab we want to store it in sel.

This listens for whenever a new tab is create in chrome. When a new tab is created we want to grab our last selection from the sel variable. Then we create an object and store the new tabs id and our last selections url and put it in a global array called tabs.

Here’s the actual function that is called when the extensions button is clicked. It finds what tab we are currently on then searches through our global array filled with the tab information. When it finds an object with a matching tabid it creates a new tab with matching url.

And that is all there is too it.free manuals

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply