I made an extension that performs a global find-and-replace in all tabs in all inputs and textareas upon enter press and upon tab load.
The Github respository is here.
popup.html ↓
<!DOCTYPE html> <header> <title>Global Replace All</title> </header> <body> <label>Find: <input type="text" id="find" /> </label> <label>Replace: <input type="text" id="replace" /> </label> <script src="popup.js"></script> </body> </html>
popup.js ↓
'use strict'; const findBox = document.getElementById('find'); const replaceBox = document.getElementById('replace'); chrome.runtime.sendMessage({ message: 'get' }, response => { findBox.value = response.find; replaceBox.value = response.replace; }); document.getElementById('find').addEventListener('input', () => { const find = findBox.value; chrome.runtime.sendMessage({ message: 'setFind', find }); }); document.getElementById('replace').addEventListener('input', () => { const replace = replaceBox.value; chrome.runtime.sendMessage({ message: 'setReplace', replace }); }); document.addEventListener('keypress', function (e) { if (e.keyCode == 13) { chrome.runtime.sendMessage({ message: 'replaceAll' }); window.close(); } });
script.js ↓
'use strict'; chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.message == 'replaceAll') { replaceAll(request.find, request.replace); sendResponse({ message: 'done ' }); } }); window.onload = function () { chrome.runtime.sendMessage({ message: 'tabLoaded' }, response => { replaceAll(response.find, response.replace); }); } function replaceAll(find, replace) { console.log(`Replacing all << ${find} >> with << ${replace} >>.`); let myRegExp = new RegExp(find, 'g'); [].forEach.call( document.querySelectorAll('input, textarea'), function (e) { e.value = e.value.replace(myRegExp, replace); } ); }
background.js ↓
'use strict'; let find = ''; let replace = ''; chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { switch (request.message) { case 'get': sendResponse({ find, replace }); break; case 'setFind': find = request.find; break; case 'setReplace': replace = request.replace; break; case 'tabLoaded': sendResponse({ find, replace }); break; case 'replaceAll': return replaceAll(); break; } }); function replaceAll() { new Promise(async resolve => { let tabList = []; chrome.windows.getAll({ populate: true }, windows => { windows.forEach(window => { window.tabs.forEach(tab => { tabList.push(tab); }); }); resolve(tabList); }); }).then(tabList => { tabList.forEach(tab => chrome.tabs.sendMessage(tab.id, { message: 'replaceAll', find, replace })); }); return true; // this means its async }
manifest.json ↓
{ "manifest_version": 2, "name": "Global Replace All", "permissions": [ "tabs", "activeTab" ], "background": { "persistent": false, "scripts": [ "background.js" ] }, "version": "0.1", "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "browser_action": { "default_icon": "icon16.png", "default_title": "Global Replace All", "default_popup": "popup.html" }, "content_scripts": [ { "matches": [ "<all_urls>" ], "js": [ "script.js" ] } ] }
chrome.browserAction.onClicked.addListener(()=>{chrome.tabs.query({},tabs=>{tabs.forEach(tab=>{chrome.runtime.executeScript(tab.id,{file:'onClick.js'});})});}). You need to add"tabs"to"permissions"in manifest file for it to work. Check the documentation.