Make an html validator extension
Download as pptx, pdf0 likes64 views
This document provides steps to create a Chrome extension that allows users to validate HTML pages with one click. It involves creating a manifest file, adding an icon, deploying the extension to Chrome, and adding popup.html and popup.js files. The popup.js uses the Chrome tabs API to get the current tab's URL and open it in the W3C validator when the user clicks the extension's button. The document also provides tips for debugging, packaging, and publishing the extension in the Chrome Web Store.
![{
"manifest_version": 2,
"name": "HTML Validator",
"description": "Validate HTML on a page",
"version": "1.0",
"browser_action": {
"default_icon": {
"32": "images/valid128.png"
},
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}](https://image.slidesharecdn.com/makeanhtmlvalidatorextension-180421190950/85/Make-an-html-validator-extension-6-320.jpg)
Make an html validator extension
- 1. Chrome Extensions Make an HTML Validator
- 2. What’s the problem? I’m grading html pages and they need to be valid HTML I want to automate copying the URL and testing it in the https://validator.w3.org/
- 3. Step 1: Create a directory Create a new directory to hold the extension code and open in IDE cd projects/chrome-ext mkdir ext-html-validate
- 4. Step 2: Create a manifest.json file The manifest lists properties of and resources used by the extension. touch ext-html-validate/manifest.json
- 5. Step 3: Add information to manifest.json Open an IDE and modify the manifest.json that should be in the root of the directory you created. https://developer.chrome.com/apps/manifest
- 6. { "manifest_version": 2, "name": "HTML Validator", "description": "Validate HTML on a page", "version": "1.0", "browser_action": { "default_icon": { "32": "images/valid128.png" }, "default_popup": "popup.html" }, "permissions": ["activeTab"] }
- 7. Step 4: Create a 128px icon Find or create a icon. You might also want to add your own 16px and 48px icons or chrome will just modify your 128px icon. ● You can use paint (windows) or preview (Mac) ● Create an images directory in your IDE ● Copy the valid.png 128px X 128px icon into the directory ● -or- get an image from the web Put in the folder referred to in the manifest. https://github.com/rebeccapeltz/html-validate-ext/blob/master/images/valid128.png
- 8. Step 5: Deploy extension to Chrome Go to chrome://extensions in your browser Ensure that the Developer mode checkbox in the top right-hand corner is checked Click Load unpacked extension to pop up a file-selection dialog & select your directory. See the icon - click on it and no file found
- 9. Step 6: Create popup.html <!doctype html> <html> <head> <title>HTML Validator</title> <script src="popup.js"></script> </head> <body> <h1>HTML Validator</h1> <button id="validatePage">Validate this page now!</button> </body> </html>
- 10. Step 7: add popup.js document.addEventListener('DOMContentLoaded', function() { let validateButton = document.getElementById('validatePage'); validateButton.addEventListener('click', function() { //use the chrome tabs API chrome.tabs.getSelected(null, function(tab) { //get the current tab's URL let encodedUrl = encodeURIComponent(tab.url) //create a call to w3 validator with current url let validateUrl = `https://validator.w3.org/nu/?showsource=yes&doc=${encodedUrl}`; //create a new tab with this URL chrome.tabs.create({ url: validateUrl }); }); }); });
- 11. Let’s try it out
- 12. Step 8: How to debug You can inspect the popup.html If you need to reload the page from within the popup inspect, go to the console and type location.reload()
- 13. How to Host Package the app What you need to publish: https://developer.chrome.com/webstore/publish Go to Dashboard: create a new google account if you don’t want to get pinged on this ( peltzrc) https://chrome.google.com/webstore/developer/dashboard?pli=1&authuser=1 Well defined icon specs: https://developer.chrome.com/extensions/manifest/icons
- 14. Package ● A detailed description of your application. Write your description to entice users to download your app. ● A 128x128 icon to display in the store. You may re-use your app icon here. ● At least one 1280x800 or 640x400 screenshot or YouTube video to show off what your app does. https://youtu.be/XNG9dxsTICU ● A 440x280 small tile icon that will be displayed on the Chrome Web Store wall. https://github.com/rebeccapeltz/html-validate-ext/blob/master/images/chrome-web-store- wall.png ● The primary category where your app should be listed. ● Your app's language to help users find it. ● ZIP up the folder holding your extension code
- 15. Validate HTML with One Click No more cutting and pasting links
- 16. Add new item on dashboard
- 17. Add new item
- 18. Enter information on extension
Editor's Notes
- #7: Browser action: default icon, default popup: show a button in the extension area and when you click shows the default popup Permissions: activeTab: allows application to look at code in active tab when you click on ext button while on the tab - no permission warning during ext load
- #11: Create a listener for loading the popup page. Assign a listener to the validate button. When you click the validate use a chrome ext API that lets you get a handle on the current tab. URL encode the tab and then append to the w3 validator and set show source to “Yes”. Now open a new tab with the tabs.create API and load the URL string you created.