Text Replacer example #612
There are no files selected for viewing
This file contains hidden or 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 hidden or 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.
Contributor
Author
There was a problem hiding this comment. Added explicit errors for unknown commands and context menus. Addressed in #1718. |
||
| }); | ||
|
|
||
| function replaceText(tabId) { | ||
| chrome.scripting.executeScript({ | ||
| target: {tabId}, | ||
| files: ['content.js'], | ||
| }); | ||
| } | ||
This file contains hidden or 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) { | ||||||
|
Contributor
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 | ||||||
|
dotproto marked this conversation as resolved.
|
||||||
| // 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, "\\$&") | ||||||
|
dotproto marked this conversation as resolved.
|
||||||
| } | ||||||
|
|
||||||
| /** 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
Contributor
Author
There was a problem hiding this comment. No. Unlike Addressed in #1718. |
||||||
| 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)
Contributor
Author
There was a problem hiding this comment. Updated the example to route all read/writes through the background context. Addressed in #1718. |
||||||
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 hidden or 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", | ||
|
dotproto marked this conversation as resolved.
|
||
| "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?
Contributor
Author
There was a problem hiding this comment. Strictly speaking, no, a default keybinding is not required. The user could still manually assign a key binding if they wanted to use it. For the sake of clarity, I've updated the demo to have a default keyboard shortcut. Addressed in #1718. |
||
| } | ||
| } | ||
| } | ||
This file contains hidden or 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 hidden or 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> | ||
|
Contributor
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?
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.
Yes, it would. I think I wrote it this way originally because I considered updates to be out of scope. I've updated the code as suggested in order to better set the reader up for success.
Addressed in #1718.