Simple Chrome Extension (Highlighted Content Text Actions) Free Source Code
This is a Simple Chrome Extension that I called Text Highlighted 101. This simple extension can do action and overwrite the highlighted text of site content. I have developed this simple chrome extension to give IT students an idea of how to create a chrome extension. The extension uses the Manifest v3. By exploring the extension, students will understand more how does the chrome browser is being made.
What are Extensions
Extension are small programs that are added into a browser and customize the browsing experience of the users. These can be a Productivity Tools, Web Page Content Enrichment, or Fun or Games.
The Simple Chrome Extension can give you little idea about creating the manifest.json.
- {
- // Manifest Version
- "manifest_version": 3,
- // Extension Name
- "name": "Text Highlighted 101",
- // Extension Version
- "version": "1.0",
- // Extension Icons
- "icons": {
- "16": "logo.png",
- "48": "logo.png",
- "128": "logo.png"
- },
- // Permissions
- "permissions": ["tabs", "scripting"],
- // Content Scripts
- "content_scripts": [{
- "matches": [
- "<all_urls>"
- ],
- "js": ["my_content_script.js"]
- }],
- }
The extension source code were built using HTML, CSS, and JavaScript.
How to Install the Extension??
- Download the provided source code zip file. (download button is located below)
- Extract the source code zip file.
- Open your Chrome Browse and in the address bar, enter
chrome://extensionand hit "Enter" on your keyboard. - Enable the Developer Mode
- Load the extracted extension's source code.
- Enable the extension in your browser
How do the Sample Extension works?
- First, pin the extension icons in the pinned extensions area of your browser.
- Browse any website in a new tab in your browser.
- Higlight any text on the site content and click the pinned extension. A Popup inteface will show.
- Next, click the Mark Highlighted button on the popup to mark the text.
- Or, click the Count Word button to count the words in the text you highlighted.
That's it! I hope this will help you and will give you an idea of how do extensions are being made.
Explore more on this website for more Free Source Codes and Tutorials.
Enjoy :)
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Add new comment
- 602 views