1. Create manifest.json
1 2 3 4 5 6 7 8 9 10 11 12 | {
"manifest_version": 2,
"name": "搜尋Flicker照片",
"description": "Flicker Search Extension",
"version": "1.0",
"permissions": [ "activeTab" ],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "helloworld.html",
"default_title": "搜尋Flicker照片"
}
}
|
2. Get icons
icon for chrome extension: https://goo.gl/7x1ID8
icon for pupup window: https://goo.gl/YldO4J
3. Create pop up window
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html style="min-width:210px;"> <head> <meta charset="UTF-8"> <title>Hello Page</title> <script src="helloWorld.js"></script> </head> <body> <form id='myForm'> <img src="magnifier.png" height="20" width="20"> <input type="text" id="queryString" style="width:100px"> <button type="submit" id="doSearch">Search</button> </form> </body> </html> |
4. Create a JS file for popup window
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /* The DOMContentLoaded event is fired when the initial HTML document * has been completely loaded and parsed, without waiting for stylesheets, * images, and subframes to finish loading. */ document.addEventListener('DOMContentLoaded', function() { var searchBtn = document.getElementById('doSearch'); // Execute the following steps as user click Search button searchBtn.addEventListener('click', function(){ // Gets query string var queryString = document.getElementById('queryString').value; // Create URL with query string var newUrl = 'https://www.flickr.com/search/?q='+queryString; // Creates a new tab. chrome.tabs.create({ url : newUrl}); }, false); }, false); |
5. Install to Chrome and do Test
Source code: https://goo.gl/sSRCz0
No comments:
Post a Comment