My First Google Chrome Extension

107 views
Skip to first unread message

Timothy Marshall

unread,
Nov 22, 2016, 5:14:29 PM11/22/16
to Chromium-Extensions-Announce
Hiya Everyone,

Story of many programmers life when they delve into a new language which can be quite a bit of a nightmare depending on previous programming experience. So I am fluent in HTML/CSS and I love using jQuery. I am autistic which means when I understand, I understand well, however when I do not understand, there have been times where the objective has had to been broken down to the most basic level of understanding to accomplish.

This is my first visit and post to the Google Community discussions whereas my other attempts to ask for help on other websites have come back with quite a lot of not so useful feedback so I am hoping the Google community discussions is now the right place to get started!



I am attempting to create a basic Chrome extension which upon clicking will append an overlay element to the DOM and a sidebar alike the Bit.ly Chrome Extension does with some tabs to then advance and built up to a higher level.

I have a couple of extensions enabled of which I have looked through the locally stored fioles for these extensions on my computer, however these haven't been much help whereas one of the Bit.ly Chrome extension files has over 42,000 lines of code within. I know I like being thrown into the deep end, however this is being thrown into the middle of the Pacific ocean!

So I would  love to learn how to, on click of the extension icon, append web page style content and interact with the page. Alike when I make a normal website, interact with the page and whatnot.




All tutorials which offer downloads I have come across to test and play around with, are simply outdated. I would love some useful help and guidance to get moving forward.

Best Regards,
Tim

Vidudaya Neranjan Bandara

unread,
Nov 22, 2016, 11:15:38 PM11/22/16
to Timothy Marshall, Chromium-Extensions-Announce
Hi Timothy,

I know this is not much but, in some way it may help you. 

The basics to up and run and test the extension are from https://developer.chrome.com/extensions

Best Regards,
Neranjan

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.
Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/57bd6752-36c3-45c5-bef7-6294ed6da9bc%40chromium.org.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

Timothy Marshall

unread,
Nov 23, 2016, 12:15:33 AM11/23/16
to Chromium-Extensions-Announce, mrtimars...@gmail.com
Hiya Neranjan,

Thank you for your reply.

This highlight paragraph extension seems somewhat useful however at this point in time, I just want to append some HTML content to the page to display a sidebar with basic tabs alike the bit.ly extension has. I now understand I can simply modify any given pages CSS by including same named styles but as for appending items, I don't know Javascript, I only know jQuery.

In my content.js file:
document.body.append('<div class="HQ-Overlay"></div>');

Chrome Developers Console - Edit HTML shows:
&lt;div class="HQ-Overlay"&gt;&lt;/div&gt;

Also this is happening to the page onLoad whereas I want the extension icon to toggle this upon clicking alike the bit.ly extension does.

I was hoping this would be a lot easier via creating an HTML file and telling the extension to simply append the file.

I seem far from my small extension I wish to make for a friend prior my much larger ambitious project extension. What my current goal is:
  1. Display a sidebar on the DOM
  2. Have the extension reach certain pages and trigger click events.
    1. Go to URL but not visible to the user.
    2. Using jQuery I know I can do $('.Element').click()
    3. Needs a delay as clicking loads information
    4. Grab information from loaded data.
      1. Option to check every X seconds.
      2. Alert if fetched data has particular value.
I don't mean to mention all of this to ask for a handout, just to hopefully explain a bit more information and it is completely frustrating myself that I cannot even get the utmost basics in my head to achieve more than I've done so to date!

Anyway, thank you for your help, much appreciated.

Best Regards,
Tim

On Wednesday, 23 November 2016 04:15:38 UTC, Vidudaya Neranjan Bandara wrote:
Hi Timothy,

I know this is not much but, in some way it may help you. 

The basics to up and run and test the extension are from https://developer.chrome.com/extensions

Best Regards,
Neranjan
On Wed, Nov 23, 2016 at 3:44 AM, Timothy Marshall <mrtimars...@gmail.com> wrote:
Hiya Everyone,

Story of many programmers life when they delve into a new language which can be quite a bit of a nightmare depending on previous programming experience. So I am fluent in HTML/CSS and I love using jQuery. I am autistic which means when I understand, I understand well, however when I do not understand, there have been times where the objective has had to been broken down to the most basic level of understanding to accomplish.

This is my first visit and post to the Google Community discussions whereas my other attempts to ask for help on other websites have come back with quite a lot of not so useful feedback so I am hoping the Google community discussions is now the right place to get started!



I am attempting to create a basic Chrome extension which upon clicking will append an overlay element to the DOM and a sidebar alike the Bit.ly Chrome Extension does with some tabs to then advance and built up to a higher level.

I have a couple of extensions enabled of which I have looked through the locally stored fioles for these extensions on my computer, however these haven't been much help whereas one of the Bit.ly Chrome extension files has over 42,000 lines of code within. I know I like being thrown into the deep end, however this is being thrown into the middle of the Pacific ocean!

So I would  love to learn how to, on click of the extension icon, append web page style content and interact with the page. Alike when I make a normal website, interact with the page and whatnot.




All tutorials which offer downloads I have come across to test and play around with, are simply outdated. I would love some useful help and guidance to get moving forward.

Best Regards,
Tim

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-...@chromium.org.

Vidudaya Neranjan Bandara

unread,
Nov 23, 2016, 12:56:26 AM11/23/16
to Timothy Marshall, Chromium-Extensions-Announce
I haven't work in this area in a few years now. But I hope eventually you'll find a way for this.

First try to implement the basics for your application. In your case it may be the sidebar (May be as you mentioned you can append that to the body also). Btw as I can see it is an overlay element.

Jquery is a JavaScript library which can be imported to extensions as well. (check below questions and answers in SO)


Any way if you search a bit then applying plain javaScript will not be a big issue for you.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsubscribe...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.

Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/11f8940f-9156-4d4b-8288-f71302641c12%40chromium.org.

Vidudaya Neranjan Bandara

unread,
Nov 23, 2016, 1:08:48 AM11/23/16
to Timothy Marshall, Chromium-Extensions-Announce
       document.body.append('<div class="HQ-Overlay"></div>');

        Just try like this,
var newDiv = document.createElement("div");
newDiv.id="cvNew";
newDiv.className = "aClassName";
document.getElementsByTagName("body")[0].appendChild(newDiv);


PhistucK

unread,
Nov 23, 2016, 1:54:05 AM11/23/16
to Timothy Marshall, Chromium-Extensions-Announce
The issue with your code is unrelated to Chrome extensions.
It will happen if you use it in a regular page as well.
Please, make sure you understand the DOM APIs first and then ask extension-specific questions here, as this is off topic.
stackoverflow.com can be used instead, which welcomes any kind of web development (or extension) question (as long as no one asked it there already, obviously).


☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsubscribe...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium-Extensions-Announce" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.
To post to this group, send email to chromium-extensions@chromium.org.

Visit this group at https://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/11f8940f-9156-4d4b-8288-f71302641c12%40chromium.org.
Reply all
Reply to author
Forward
0 new messages