https://github.com/hacksu/chromeextensionexample
https://github.com/hacksu/chromeextensionexample
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hacksu/chromeextensionexample
- Owner: hacksu
- License: unlicense
- Created: 2016-01-26T03:56:54.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-28T14:45:00.000Z (about 10 years ago)
- Last Synced: 2025-06-05T06:59:42.852Z (9 months ago)
- Language: JavaScript
- Size: 38.1 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license.txt
Awesome Lists containing this project
README
# ChromeExtensionExample
An example of a Chrome extension. Here it demonstrates two functions of Chrome extensions: the ability to add information
to pages, and the ability to save data.
# Instructions
# Setup
Go to http://bit.ly/ChromeHacKSU and download the repository either through git, or by clicking the Download Zip button on
the upper right just below the yellow bar and unziping the file.
Open this folder in your text editor of choice and then go into Chrome and navigate to `More Tools/Extensions` in the menu
to the right of the url bar. You should see a screen listing any extensions you might have installed. Click on the `Developer Mode`
check box in he upper right and you should see additional options. Click the `Load unpacked extension...` button in the
upper left and navigate to the directory where you downloaded the repository and open it.
Your extension should now show up in the top of the list where you can reload it or get details about its permissions or id
# Experiment
Load any page, https://www.google.com/ works well, and press `control shift L` (command on OSX). You should see in the Console
`Hello World`. Lets figure out why. Our project is really only made up of two files at this point. `helloWorld.js` and `manifest.json`
* `manifest.json` tells Chrome what to do with our extension. You might recognize it as a JSON file which is a common way
to serialize object like data structures for transmission between server's and storage. It's essentially a dictionary, where each
value is given a name. The manifest provided here provides a minimalistic implementation.
* `manifest_version` informs Chrome that the plugin was written with version 2 in mind. Currently version 2 is the newest version
* `name` tells Chrome what to call our extension
* `version` tells Chrome what the current version number for the extension is. Keep this value small as the plugin will only
get updated when uploaded to the Chrome Store when the version number grows larger.
* Finally `content_scripts` gets into the meat of our plugin. It may also look slightly strange compared to other entries in
this document. It's an array of object. Each object defines scripts and pages that should be loaded into a page.
* `matches` defines the urls this script will be loaded into.
* `js` This is an array of JavaScript files. They are loaded into any pages that match the url as if they were included
directly, though with slightly different security restrictions
So we see that `helloWorld.js` is being loaded into all pages by our plugin. When we open it up we can see that it has
only one line `console.log("Hello World");`. So that's our starting point. A plugin that prints Hello World.