Text Replacer example by dotproto · Pull Request #612 · GoogleChrome/chrome-extensions-samples

dotproto · 2021-07-12T23:30:01Z

Adds a sample extension called "Text Replacer." As the name implies, this extension will replace a string in the page with a custom string. Currently supports 5 replacements.

samthor · 2021-07-24T05:47:33Z

+    </div>
+  </form>
+
+  <script src="popup.js"></script>


Can you use type="module"? Then you can use top-level await in the code, rather than the awkward loading and call to loadFormData.

samthor · 2021-07-24T05:48:10Z

+  });
+});
+
+document.getElementById('clear').addEventListener('click', (event) => {


You can get rid of this and change the <button> to be an <input type="reset" />.

I've replaced the button with <input type="reset">, but still need an event listener in order to persist the changes.

Addressed in #1718.

samthor · 2021-07-24T05:48:46Z

+  const inputs = form.querySelectorAll('input[type=text]');
+
+  const patterns = [...inputs].reduce((acc, input, index) => {
+    const outerIndex = index >> 1;


Do a real division and round it. Sorry, but we should be clear to novices.

Addressed in #1718.

samthor · 2021-07-24T05:53:07Z

+// https://developers.google.com/open-source/licenses/bsd
+
+// Replace text on the page using a static list of patterns
+function textReplacer(replacements) {


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.

Addressed in #1718.

rdcronin · 2021-08-02T20:06:35Z

+chrome.runtime.onInstalled.addListener(() => {
+  registerContextMenus();
+});


During extension update, will this cause an error by trying to re-register context menu items?

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.

rdcronin · 2021-08-02T20:07:16Z

+}
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId == 'replace-text-menuitem') {


extract "replace-text-menuitem" into a constant

Addressed in #1718.

rdcronin · 2021-08-02T20:47:23Z

+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId == 'replace-text-menuitem') {
+    replaceText(tab.id);
+  }


I'd normally recommend throwing an assert in here, since this is the only id we ever expect. Similarly for commands.

Added explicit errors for unknown commands and context menus.

Addressed in #1718.

rdcronin · 2021-08-02T20:48:39Z

+
+function buildReplacementRegex(source) {
+  const output = [];
+  for (var i = 0; i < source.length; i++) {


Suggested change

for (var i = 0; i < source.length; i++) {

for (let i = 0; i < source.length; i++) {

Addressed in #1718.

rdcronin · 2021-08-02T20:50:14Z

+function replaceText(replacements) {
+  let node;
+  const nodeIterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT);
+  while (node = nodeIterator.nextNode()) {


can we declare node here? We only need it in the body

No. Unlike for-in statements, which may contain declarations, while statements require an expression in the condition position. We also can't use for-in here because the NodeIterator interface predates JavaScript's iteration protocol. The closest we can do is move the let declaration next to the while to make their relationship more clear. I've applied this change to my new PR.

Addressed in #1718.

rdcronin · 2021-08-02T20:51:07Z

+chrome.storage.sync.get(['patterns'], function(data) {
+  textReplacer(data.patterns);
+});


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)

Updated the example to route all read/writes through the background context.

Addressed in #1718.

rdcronin · 2021-08-02T20:53:46Z

+  },
+  "commands": {
+    "replace-text": {
+      "description": "Replace text on the current page."


Doesn't this need a default keybinding?

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.

Linetkhgt · 2021-10-11T22:47:18Z

README.md

nagayev · 2022-01-29T19:57:23Z

+1
It was useful for me.

patrickkettner · 2023-03-20T15:54:10Z

@sebastianbenz @oliverdunk what should we do with these older PRs?

patrickkettner · 2026-07-18T18:04:31Z

@dotproto, since we still dont have a textreplacer sample, any chance youd like to update this to get it merged?

dotproto · 2026-07-19T22:28:49Z

I'm no longer able to edit the text-replacer brach, so this PR has been replaced by #1718.

* Text Replacer example * Addressing feedback from PR #612 * Fix issues identified in #1718 review * Add more icon options to the manifest * Add README * Update copyright and license headers * Iterating on feedback in #1718 * Simplify regex creation logic * Fix ESLint errors and warnings

Simeon Vincent added 3 commits July 12, 2021 16:23

Text Replacer example

cf3ca9c

Add basic description

0bc7caa

Add basic description

e35f5c0

dotproto requested review from Celsius273, awfuchs, karan173 and rdcronin July 14, 2021 06:53

dotproto requested a review from samthor July 23, 2021 15:38

samthor approved these changes Jul 24, 2021

View reviewed changes

rdcronin reviewed Aug 2, 2021

View reviewed changes

dotproto mentioned this pull request Jul 19, 2026

Text Replacer example #1718

Merged

dotproto added a commit to dotproto/chrome-extensions-samples that referenced this pull request Jul 19, 2026

Addressing feedback from PR GoogleChrome#612

7f642fa

dotproto added a commit to dotproto/chrome-extensions-samples that referenced this pull request Jul 19, 2026

Addressing feedback from PR GoogleChrome#612

e10e8d2

dotproto closed this Jul 19, 2026

	for (var i = 0; i < source.length; i++) {
	for (let i = 0; i < source.length; i++) {

Uh oh!

Conversation

dotproto commented Jul 12, 2021

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Linetkhgt commented Oct 11, 2021

Uh oh!

nagayev commented Jan 29, 2022

Uh oh!

patrickkettner commented Mar 20, 2023

Uh oh!

patrickkettner commented Jul 18, 2026

Uh oh!

dotproto commented Jul 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants