Introduce
The purpose is to test the extension on chrome, it is responsible for displaying a popup prompt to write the correct formmat commit when sending pull in github, for “forgetful” members: v. Now let’s get started!
Code
First we create the manifest.json file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token punctuation">{</span> <span class="token property">"name"</span> <span class="token operator">:</span> <span class="token string">"Popup"</span> <span class="token punctuation">,</span> <span class="token property">"description"</span> <span class="token operator">:</span> <span class="token string">"Popup reminder"</span> <span class="token punctuation">,</span> <span class="token property">"version"</span> <span class="token operator">:</span> <span class="token string">"1.0"</span> <span class="token punctuation">,</span> <span class="token property">"browser_action"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"default_icon"</span> <span class="token operator">:</span> <span class="token string">"reminder.png"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"permissions"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"tabs"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"content_scripts"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token property">"matches"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"*://*/*"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"css"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"app.css"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"js"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"index.js"</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"manifest_version"</span> <span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> |
Inside:
name : This is the name of the extension.
description : Description for the extension.
version : The version of extenssion.
browser_action : Used to customize the icon, popup, tooltip, this article I only use the icon .. see more Browser Action
permissions : list the permissions that your extension wants to use, declare the website urls that it wants to run and the permissions. See also permissions
manifest_version : is the chrome extension you use (currently version 2). You can see here manifest_version
content_scripts : used to list the files that will be injected into the chrome browser, when visiting websites that match the addresses declared in matches, as here are all pages. Content Scripts
Create the index.js file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | var str= `<div id="extensionsReminder" class="overlay"> <div class="popup"> <h2>Reminder</h2> <div id="extensionsClose" class="close">&times;</div> <div class="content"> Check format commit <br/> [Task #tickedNo][API|UT] description task </div> </div> </div>`; document.body.appendChild(htmlToElement(str)) if(/https://github.com(.*compare)/i.test(location.href) || /https://github.com(.*pull)/i.test(location.href)){ document.getElementById('extensionsReminder').classList.add('target') }else{ document.getElementById('extensionsReminder').classList.remove('target') } document.getElementById('extensionsClose').addEventListener('click', function(){ document.getElementById('extensionsReminder').classList.remove('target') }); /** * @param {String} HTML representing a single element * @return {Element} */ function htmlToElement(htmlString) { var div = document.createElement('div'); div.innerHTML = htmlString.trim(); return div.firstChild; } |
/https://github.com(.*compare)/ This is a regex check if it is on the github page and the url contains compare or pull , we show popup
htmlToElement function to create html element from string
follow simply go to the page to create a popup in the hidden state check url in the right condition for display
Create app.css file
Create css file to style popup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | body { font-family: Arial, sans-serif; height: 100vh; } h1 { text-align: center; font-family: Tahoma, Arial, sans-serif; color: #06D85F; margin: 80px 0; } .box { width: 40%; margin: 0 auto; background: rgba(255,255,255,0.2); padding: 35px; border: 2px solid #fff; border-radius: 20px/50px; background-clip: padding-box; text-align: center; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 99999; } .overlay.target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; cursor: pointer; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } } |
Setting
That’s enough for our extension to work already. To install it, we can enter the chrome://extensions/ url in chrome://extensions/ address bar, enable Chế độ dành cho nhà phát triển , then select Tải tiện ích đã giải nén . Next, select the folder containing the code and press the Ok button.
summary
because github is written in SPA style, we should detect when the url changes, show popup
One way is to use setInterval () to check
Source : https://github.com/trangianhuan/reminder Demo when visiting github:
You notice your extension after installation is a small yellow bell icon in the address bar
