Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am experienced in HTML and JavaScript but have never made a (real) Chrome Extension (other than the "Hello World' tutorial).
What I want to do is make an extension that adds functionality to viewing images. Basically I want a pieice of JavaScript to load when you go to a .jpg, .png, ect. page.
I couldn't get much out of the "Hello World" tutorial or the Docs and I've looked at code from XML Tree, but I'm having trouble understanding it.
I don't know where to go from here.
Since you're experienced in JavaScript and HTML, tell you what the best source is?
http://developer.chrome.com/extensions/getstarted.html
Documentation
The above link (Chrome Extension Documentation) is so simple to read once you get a hang of it. For example, I didn't know JavaScript when I created my first Chrome Extension (Reload all tabs). I recommend you to read the docs (will only take you an hour), and follow the steps that you need.
Make sure you understand the different UI's you can tap to
Browser Actions: You use browser actions to put icons in the main Chrome toolbar.
Context Menus: You use context menus to add items to Chromes context menu.
Desktop Notifications: Use desktop notifications to notify users that something is important.
Option Pages: If you want an options page, this is your guy!
Page Actions: If you want to override certain pages (New Tab, History, Bookmark Manager)
Make sure you realize there are many browser interactions that you can tap into:
Bookmarks: Access to your bookmarks
Cookies: Access to Cookies
History: Access to History
Management: Access to Extension Management
Tabs: Access to your Tabs
Windows: Access to your Windows (which has Tabs).
Make sure you understand the difference between Background Pages and Content Scripts, and their limitations.
Make sure you realize there are some neat functions in the Chrome.* API.
Make sure you understand permissions.
Many more
145 Chrome Questions I answered on Stackoverflow
If you want more examples, I have answered many questions regarding Chrome Extensions that might help you get started (145+ Questions Answered), for example, here are some of the more recent ones:
Content Script Skeleton
Send data from Background Page to Content Script
Communication with the embedding page, Simple fetching of the pages JS variable
Taking Screenshots in Chrome
Walkthrough building an extension
Executing JavaScript when a user clicks on a browser action.
How to capture selected text and send it to a web service
Walkthrough how to create an extension to access Disqus Comment Box
Walkthrough how to highlight the DIV that the mouse if hovering over
Walkthrough how to move to the top of the page extension
Walkthrough how to create a bubble overlay when you select text.
etc and 120 more answers for Chrome Extensions, the above is what I copied from the results on the first page. So a search in Google will get you many results.
Real open source extension I created
If you want to see real source code of the extensions I have written (some are super small, some are super big):
Reload all tabs extension
Open link in a foreground tab extension
HTML5 Haptics Chrome extension
Set Wallpaper extension
Prayer times extension
Facebook friend exporter extension
Proxy Anywhere extension
Resources
If you still want more resources, you can:
Read the documentation.
Read the Official Chromium Extension Mailing list
The unofficial Internet Relay Chatroom #chromium-extensions on irc.freenode.net
Google (Will bring you to Stackoverflow, or Quora)
I hope this helped!
well it’s not that tough to create a chrome extension ,anyone who has a basic understanding of HTML,CSS,Javascript can actually make one!
If you want to make a extension I have wrote an article on Medium it might be useful here's the link
Also I have attached my code on github here’s the link
Keep Learning!
Related
I've been trying to get some unblocked games on my school computer and one way I found out is to run them through an iframe. But I've been asked to add some cheats onto one of the games. So I need to somehow add a chrome extension onto an iframe. Help.
Edit: I don't want to create my own extension but I want to use one I found on GitHub. I also can't add any extensions on my school computer developer mode or not.
Here is the extension i want to use https://github.com/Kalaborative/survivio-plus
I want to write a module? an addon? a plugin? an extension? to a web browser, which will preload all web pages by links, which could be found on a "current" web page - a web page on which user is currently on. After, if user want to switch to some other web page by a link from "current", browser should just open that preloaded page from somewhere, where we store preloaded pages, and do the same actions from new " current ". So, the question is, which of above variants (module? an addon? a plugin? an extension?) could solve my problem, (because as I understand, some of them can have limited functions), or maybe I have to edit the source code of browser, and which browser would you suggest to work with? And if you know any information source, which could help me in understanding how to implement it, I'd be grateful if you post a link! (I'd really appreciate a full answer, because I didn't found much info on the internet about this theme). Thank you!
I want to build a task-specific web browser. For example, when the user uses that browser, the program should give options like these:
What is your interest today? Please select from the following:
computer science
data science
web development
psychology
biology
social media
etc.
After the user selects their interest, the browser should allow the user to search or study only those selected content types, so the user cannot get diverted from their task. The purpose of this browser is to avoid time-wasting. Because whenever someone tries to study or do some professional work, they get diverted by opening social media tabs and movies.
Which programming language will be suitable for making this browser?
You could do this by making a custom version of an existing browser, as guest271314 suggested, but that would require far more effort than necessary. All you need to make is a browser extension, such as a Firefox Add-on or a Chrome Extension. Browser extensions are usually written with JavaScript, HTML, and CSS. Each browser needs to have an extension made individually, but you can usually share a lot of the code between them. Read the linked documentation for help creating an extension for each browser.
There are already existing browser extensions like you describe that prevent you from visiting sites that you put on a list ahead of time, such as StayFocusd and WasteNoTime. Maybe you just want to use one of those extensions instead of writing a new one.
I'm new to Chrome extensions and would like to understand how all types of scripts/pages work.
Here is my understanding:
First - there are "content scripts", ones that should be used to actually modify the pages.
Second - there is a "background script", designed to work like as a server that you send and receive messages from, but it does not modify the pages' DOM; so it can perform tasks like dealing with storage and communicating between scripts but not modifying the page.
Lastly - there are "popup scripts", they are separated from both content scripts and background scripts, but you can still send/receive messages between them.
The popup scripts can NOT directly modify the page (same as background script), they can only send messages to the other two.
You do not declare them at all in the manifest file, you can just go straight and use them in your popup html file.
In the end only the content scripts can eventually actually modify a page.
Am I correct?
One Chrome extension documentation Link to rule them all, One Link to find them,
One Link to bring them all and in the darkness bind() them1:
>> Architecture Overview <<
(artist's impression)
It should answer many of your questions. However, that would be a bad SO answer, so a summary from me:
Background page/scripts: Only one page exists per extension. It is invisible and can never be displayed in a tab. Normally, it is open as long as Chrome is open, though there are exceptions. Since it's always there and has the highest level of access to Chrome APIs, it's frequently used for main logic / event routing between parts of the extension. In short, background work.
Event page/scripts: A variant of background pages that are unloaded if there is no code running. This saves memory, but introduces complexity as to maintaining state. Chrome remembers which events should be listened to (via addListener) and loads the page again when they happen. Hence, event page.
Besides that, extension can have other, visible pages. You can just open them in a tab (they would have chrome-extension://extensionidgoeshere/page.html address), and they will have same level of access to Chrome API. Two UI types are special to extensions though:
Browser/Page Action popup: A small window that's opened with a click on the corresponding UI element. Unfortunately, it's also very fragile - it will close as soon as it loses focus. Other than that, it's just an extension page.
Options page: Comes in two flavours. Version 1 Options page is just a tab that's opened when invoking options for an extension; Version 2 Options page can optionally show in a special box inside chrome://extensions/. Again, other than that it's just a page with extension privileges.
Finally, having a bunch of pages is fun, but if you want to interact with existing pages/tabs, you'll need to inject scripts in them.
Content Scripts are scripts that run alongside pages; for compatibility reasons, they run in an isolated world. For security reasons, they are severely limited in access to Chrome API. But they share the DOM with the page, and as such can modify it.
Page-level Scripts is something you barely find mentioned in documentation (as "DOM injected scripts"), but they are very useful to break the barrier between extension JavaScript and page's own JavaScript. A good overview of them is presented in this answer by the magnificent Rob W.
Having defined all relevant extension parts, the documentation page also briefly mentions how to communicate between them. For a more in-depth look into this aspect, see this answer (again by Rob W) and the Messaging documentation.
1 Seriously though, every beginning extension developer needs to read that, and this page is not prominent the documentation. Good job, Google.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I've seen this extension in the Chrome Web store, which shows the newest videos of a YouTube channel. I want to modify this extension in order to make it work with a different channel.
How can I get this done?
You've got two options:
Contact the extension's developer, and ask for assistance.
Edit the source code
I'm going to explain how you can modify an extension, and install it, in easy terms.
Getting the source and modifying it
Install the Chrome extension source viewer.
Go to the page in the Chrome Web Store of the extension you want to modify.
Click on the yellow CRX button in the context menu, and choose Download (screenshot).
Extract the zip file.
Read the source code, and change what needs to be changed (in your particular case, I had quickly identified that you wanted to change edit config.js and change the "channel" property). Save the changes.
Using the modified version of the extension.
Visit the Chrome extension page (chrome://extensions/).
Enable Developer mode, by activating the switch in the upper-right corner.
Click on the "Load unpacked extension" button.
Select the folder of your extension (to know which folder is correct, check whether the folder contains a file called manifest.json).
Confirm. You're done.
Unless you've made a mistake in either of these steps (including the modification of the source code), the modified extension should work as intended.
Ethics
Modifying someone else's extension for personal use is not a big deal. However, do not distribute this extension without the original developer's consent. The original author has put lots of efforts in creating the extension, and might even have his/her contact details on it. If you distribute a (modified) copy of the extension, the original author cannot update the extension any more, so s/he cannot resolve bugs.
Even worse, if you turn the extension in a bad shape, users will complain to the original author, because their contact details are on it.