Text Replacer example #612
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| chrome.commands.onCommand.addListener((command, tab) => { | ||
| if (command == 'replace-text') { | ||
| replaceText(tab.id); | ||
| } | ||
| }); | ||
|
|
||
| chrome.runtime.onInstalled.addListener(() => { | ||
| registerContextMenus(); | ||
| }); | ||
|
|
||
| function registerContextMenus() { | ||
| chrome.contextMenus.create({ | ||
| id: 'replace-text-menuitem', | ||
| title: 'Replace text', | ||
| }); | ||
| } | ||
|
|
||
| chrome.contextMenus.onClicked.addListener((info, tab) => { | ||
| if (info.menuItemId == 'replace-text-menuitem') { | ||
|
There was a problem hiding this comment. extract "replace-text-menuitem" into a constant |
||
| replaceText(tab.id); | ||
| } | ||
|
There was a problem hiding this comment. I'd normally recommend throwing an assert in here, since this is the only id we ever expect. Similarly for commands. |
||
| }); | ||
|
|
||
| function replaceText(tabId) { | ||
| chrome.scripting.executeScript({ | ||
| target: {tabId}, | ||
| files: ['content.js'], | ||
| }); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,47 @@ | ||||||
| // Copyright 2021 Google LLC | ||||||
| // | ||||||
| // Use of this source code is governed by a BSD-style | ||||||
| // license that can be found in the LICENSE file or at | ||||||
| // https://developers.google.com/open-source/licenses/bsd | ||||||
|
|
||||||
| // Replace text on the page using a static list of patterns | ||||||
| function textReplacer(replacements) { | ||||||
|
There was a problem hiding this comment. I think having this method is a bit confusing. I'd just move its two lines into the callback for the fetcher, and expand the comment: // Get the patterns to replace from storage, then build a regex from them and replace all text on the page. |
||||||
| const replacementPatterns = buildReplacementRegex(replacements); | ||||||
| replaceText(replacementPatterns); | ||||||
| } | ||||||
|
|
||||||
| function buildReplacementRegex(source) { | ||||||
| const output = []; | ||||||
| for (var i = 0; i < source.length; i++) { | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| if (!source[i]) { continue; } | ||||||
| const [find, replace] = source[i]; | ||||||
| const sanitizedMatch = escapeRegExp(find); | ||||||
| const findExp = new RegExp(`\\b${sanitizedMatch}\\b`, 'gi'); | ||||||
| output[i] = [findExp, replace]; | ||||||
| } | ||||||
| return output; | ||||||
| } | ||||||
|
|
||||||
| // Use var to avoid "Identifier 'REGEXP_SPECIAL_CHARACTERS' has already been | ||||||
|
There was a problem hiding this comment. Oh wow. I didn't realise this runs non-ESM code and runs in the top-scope. Everything in this file is being redeclared always. Would it be worth putting it in an IIFE? Is that too complex? |
||||||
| // declared" errors when running multiple times on the same page. | ||||||
| var REGEXP_SPECIAL_CHARACTERS = /[.(){}^$*+?[\]\\]/g; | ||||||
| /** Sanitize user input to prevent unexpected behavior during RegExp execution */ | ||||||
| function escapeRegExp(pattern) { | ||||||
| return pattern.replace(REGEXP_SPECIAL_CHARACTERS, "\\$&") | ||||||
|
There was a problem hiding this comment. I highly suspect this might not be all regex chars. Maybe call out that this is for example purposes only? |
||||||
| } | ||||||
|
|
||||||
| /** Iterate through all text nodes and replace */ | ||||||
| function replaceText(replacements) { | ||||||
| let node; | ||||||
| const nodeIterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT); | ||||||
| while (node = nodeIterator.nextNode()) { | ||||||
|
There was a problem hiding this comment. can we declare node here? We only need it in the body |
||||||
| for (let [find, replace] of replacements) { | ||||||
| node.nodeValue = node.nodeValue.replace(find, replace); | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| // Replace text on the page using a list of patterns loaded from storage | ||||||
| chrome.storage.sync.get(['patterns'], function(data) { | ||||||
| textReplacer(data.patterns); | ||||||
| }); | ||||||
|
Comment on lines
+45
to
+47
There was a problem hiding this comment. We're going to be gradually encouraging developers to avoid storage access by content scripts unless crucial. WDYT about changing this to a message to the background page? (I don't feel strongly) |
||||||
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| { | ||
| "name": "Text Replacer", | ||
| "version": "1.0.0", | ||
| "manifest_version": 3, | ||
| "description": "Replace any a line of text on a page with another line of text.", | ||
| "icons": { | ||
| "32": "icons/icon32.png", | ||
| "48": "icons/icon48.png", | ||
| "64": "icons/icon64.png" | ||
| }, | ||
| "action": { | ||
| "default_title": "Show an alert", | ||
|
|
||
| "default_icon": { | ||
| "16": "icons/icon16.png", | ||
| "24": "icons/icon24.png", | ||
| "32": "icons/icon32.png" | ||
| }, | ||
| "default_popup": "popup.html" | ||
| }, | ||
| "permissions": [ | ||
| "scripting", | ||
| "activeTab", | ||
| "storage", | ||
| "commands", | ||
| "contextMenus" | ||
| ], | ||
| "background": { | ||
| "service_worker": "background.js" | ||
| }, | ||
| "commands": { | ||
| "replace-text": { | ||
| "description": "Replace text on the current page." | ||
|
There was a problem hiding this comment. Doesn't this need a default keybinding? |
||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /* | ||
| Copyright 2021 Google LLC | ||
|
|
||
| Use of this source code is governed by a BSD-style | ||
| license that can be found in the LICENSE file or at | ||
| https://developers.google.com/open-source/licenses/bsd | ||
| */ | ||
|
|
||
| html, body { | ||
| height: 200px; | ||
| width: 400px; | ||
| margin: 0; | ||
| padding: 0; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| body { | ||
| padding-bottom: 2em; | ||
| } | ||
|
|
||
| .form--table { | ||
| width: 100%; | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| .form--input { | ||
| width: 100%; | ||
| padding: .25rem .5rem; | ||
| background: #eee; | ||
| box-sizing: border-box; | ||
| border: 1px solid #0004; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| th { | ||
| text-transform: uppercase; | ||
| font-size: .7rem; | ||
| color: hsl(0, 0%, 30%); | ||
| } | ||
|
|
||
| td { | ||
| padding: .25rem .1rem; | ||
| } | ||
|
|
||
| td:first-child { | ||
| padding-left: .25rem; | ||
| } | ||
| td:last-child { | ||
| padding-right: .25rem; | ||
| } | ||
|
|
||
| .form--controls { | ||
| position: fixed; | ||
| display: flex; | ||
| bottom: 0; | ||
| right: 0; | ||
| left: 0; | ||
| } | ||
| .form--controls > * { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .form--controls > * { | ||
| border: none; | ||
| height: 2rem; | ||
| margin: .1rem; | ||
| cursor: pointer; | ||
| border: 1px solid hsla(0, 0%, 0%, .2); | ||
| } | ||
|
|
||
| .form--controls > *:first-child { | ||
| margin-left: .25rem; | ||
| } | ||
| .form--controls > *:last-child { | ||
| margin-right: .25rem; | ||
| } | ||
|
|
||
| #clear { | ||
| background: hsl(0, 0%, 100%); | ||
| } | ||
| #clear:hover, | ||
| #clear:focus { | ||
| background: hsl(0, 0%, 80%); | ||
| } | ||
| #submit { | ||
| background: hsl(190, 100%, 60%); | ||
| } | ||
| #submit:hover, | ||
| #submit:focus { | ||
| background: hsl(190, 80%, 50%); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Copyright 2021 Google LLC | ||
|
|
||
| Use of this source code is governed by a BSD-style | ||
| license that can be found in the LICENSE file or at | ||
| https://developers.google.com/open-source/licenses/bsd | ||
| --> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="popup.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <form> | ||
| <table class="form--table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Find</th> | ||
| <th>Replace</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| <td> | ||
| <input type="text" class="form--input"> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <div class="form--controls"> | ||
| <input id="clear" type="button" value="Clear"> | ||
| <input id="submit" type="submit" value="Replace"> | ||
| </div> | ||
| </form> | ||
|
|
||
| <script src="popup.js"></script> | ||
|
There was a problem hiding this comment. Can you use |
||
| </body> | ||
|
|
||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
During extension update, will this cause an error by trying to re-register context menu items?