Document

diff --git a/how-to-make-chrome-extensions/README.md b/how-to-make-chrome-extensions/README.md new file mode 100644 index 0000000..fc9afa3 --- /dev/null +++ b/how-to-make-chrome-extensions/README.md @@ -0,0 +1,8 @@ +# How To Make Chrome Extensions + +> [https://youtu.be/Ipa58NVGs_c](https://youtu.be/Ipa58NVGs_c) + +* Go to `chrome://extensions/` +* Enable Developer mode +* Load unpacked and select the `bear` folder from this project. + diff --git a/how-to-make-chrome-extensions/bear/background.js b/how-to-make-chrome-extensions/bear/background.js new file mode 100644 index 0000000..9373dd3 --- /dev/null +++ b/how-to-make-chrome-extensions/bear/background.js @@ -0,0 +1,8 @@ +window.bears = {} +chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { + window.bears[request.url] = request.count +}) + +chrome.browserAction.onClicked.addListener(function (tab) { + chrome.tabs.create({url: 'popup.html'}) +}) \ No newline at end of file diff --git a/how-to-make-chrome-extensions/bear/content.js b/how-to-make-chrome-extensions/bear/content.js new file mode 100644 index 0000000..e11d1c4 --- /dev/null +++ b/how-to-make-chrome-extensions/bear/content.js @@ -0,0 +1,13 @@ +//alert('Grrr.') +// chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { +// const re = new RegExp('bear', 'gi') +// const matches = document.documentElement.innerHTML.match(re) +// sendResponse({count: matches.length}) +// }) + +const re = new RegExp('bear', 'gi') +const matches = document.documentElement.innerHTML.match(re) +chrome.runtime.sendMessage({ + url: window.location.href, + count: matches.length +}) \ No newline at end of file diff --git a/how-to-make-chrome-extensions/bear/manifest.json b/how-to-make-chrome-extensions/bear/manifest.json new file mode 100644 index 0000000..0896d7f --- /dev/null +++ b/how-to-make-chrome-extensions/bear/manifest.json @@ -0,0 +1,18 @@ +{ + "name": "bear", + "version": "1.0", + "manifest_version": 2, + "content_scripts": [ + { + "matches": [""], + "js": ["content.js"] + } + ], + "browser_action": { + "default_title": "Bear" + }, + "background": { + "scripts": ["background.js"] + }, + "permissions": ["tabs"] +} \ No newline at end of file diff --git a/how-to-make-chrome-extensions/bear/popup.html b/how-to-make-chrome-extensions/bear/popup.html new file mode 100644 index 0000000..78b4998 --- /dev/null +++ b/how-to-make-chrome-extensions/bear/popup.html @@ -0,0 +1,11 @@ + + + + + Document + + + + + + \ No newline at end of file diff --git a/how-to-make-chrome-extensions/bear/popup.js b/how-to-make-chrome-extensions/bear/popup.js new file mode 100644 index 0000000..8918f30 --- /dev/null +++ b/how-to-make-chrome-extensions/bear/popup.js @@ -0,0 +1,23 @@ +document.addEventListener('DOMContentLoaded', function () { + + const bg = chrome.extension.getBackgroundPage() + Object.keys(bg.bears).forEach(function (url) { + const div = document.createElement('div') + div.textContent = `${url}: ${bg.bears[url]}` + document.body.appendChild(div) + }) + + // document.querySelector('button').addEventListener('click', onclick, false) + // + // function onclick () { + // chrome.tabs.query({currentWindow: true, active: true}, function (tabs) { + // chrome.tabs.sendMessage(tabs[0].id, 'hi', setCount) + // }) + // } + // + // function setCount (res) { + // const div = document.createElement('div') + // div.textContent = `${res.count} bears` + // document.body.appendChild(div) + // } +}, false) \ No newline at end of file