DEV Community

Basics of Chrome extensions development part two

aurel kurtula on November 20, 2017

Welcome back to a second tutorial on the basics of chrome extensions. If you haven't read the first tutorial you can read it here. In part one we e...
Collapse
 
sake_92 profile image
Sakib Hadžiavdić

Hi, nice post! :D

Have you ever tried to make a toolbar-like extension?

I wanted to do that, but seems impossible to make it work on every page...

Here is a basic recipe, but when you translateY() the body down, some pages get broken, like Facebook or Stackoverflow.

I guess I'll have to override new tab page (but there are already plugins like that).

Any suggestions?

Collapse
 
aurelkurtula profile image
aurel kurtula • Edited

The bookmarks toolbar is a toolbar, if that's what you mean, I have no idea ( don't know if that's possible to do). But in the link StumbleUpon is mentioned. They do this:

It looks like the are using the approach I explored in part one. I had StumbleUpon installed for a while and whilst I never looked into it, it looks definitely as though they used that approach rather than this one

Now you got me hooked, please let me know if I understood you and if the first approach is the kind of thing you are looking for (all though the tutorial is very basic)

edit - From a quick google search other developers that make tutorials on "how to create a toolbar" are simply adding a navigation bar on the page, so, yes if that's what you want, this is not what you need, the first tutorial is for you.

Collapse
 
sake_92 profile image
Sakib Hadžiavdić • Edited

Well, I basically wanted to REPLACE original bookmarks toolbar, like this:
toolbar

Only way to do that is to use a content script (like in your first tutorial). To add my div to the body and position it. That's all I want.. :D

Thread Thread
 
aurelkurtula profile image
aurel kurtula

Cool

Collapse
 
sunnyhithk profile image
Sunnyhith K

Hi Aurel, great posts! Loved them <3!
For the part where we have to get the highlighted text from a webpage, I have done it without local storage by using chrome.tabs.executeScript
Would this cause any issue? I'm a new developer wrt chrome extensions. Any help would be great! :)
Thanks.