1
<div class="row">
  <div class="col-8">
    <div id="FundingContainer-ContentSection-TEXT A" class="atlas-ContentSection-container">
      <div class="atlas-SectionHeading-container atlas-SectionHeading-h2">
        <div class="">
          <h2 class="atlas-SectionHeading-accentBar">Text A</h2>
          <div class="atlas-SectionHeading-additionalHeaderComponent atlas-SectionHeading-additionalHeaderComponentPadding">
            <div style="display: inline-block;">
              <h2 class="atlas-SectionHeading-accentBar">
                <button id="FundingContainer-TextLink-EditPlans" class="atlas-TextLink-text false" tabindex="0"
                type="button">Edit Plans</button>
              </h2>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="atlas-List-container atlas-List-border">
          <div class="atlas-List-listItem">
            <div class="atlas-List-primary">
              <div class="SelectedRedactedPlan_container__1eac-">
                <div class="RedactedPlan_container__1ss9R">
                  <div class="row">
                    <div class="col-11">
                      <h4 class="RedactedPlan_description__1dotH">Redacted</h4>
                      <div style="display: inline-block;">
                        <div class="atlas-Pill-container atlas-Pill-nonremovable atlas-Pill-status" tabindex="-1"
                        style="background-color: rgb(67, 126, 62); color: rgb(255, 255, 255);">
                          <div class="atlas-Pill-text">
                            <h4 class="RedactedPlan_description__1dotH">Selected</h4>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-1">
                      <div style="display: inline-block;">
                        <span class="RedactedPlan_selectedPill__U0QJk">
                          <button id="RedactedPlan-TextLink-Clear" class="atlas-TextLink-text false" tabindex="0"
                          type="button">
                            <span class="RedactedPlan_selectedPill__U0QJk">CLEAR</span>
                          </button>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12 RedactedPlan_appliedTo__K2tPx">
                      <h5>Applied to NAME (Primary)</h5>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-2">
                      <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2"
                      class="atlas-FieldGroup-width100">
                        <div class="atlas-FieldGroup-bottom-margin">
                          <div class="atlas-Label-container atlas-Label-standardLayout">
                            <div class="">
                              <div class="atlas-Label-labelText">
                                <label class="atlas-Label-label">Redacted 2</label>
                              </div>
                            </div>
                            <div class="atlas-Label-actionElementCol"></div>
                          </div>
                          <div id="RedactedPlan-SummaryField-Redacted2" class="atlas-BaseSummaryField-text">
                          $280.78</div>
                        </div>
                      </div>
                    </div>
                    <div class="col-2">
                      <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2-TextBCompletion"
                      class="atlas-FieldGroup-width100">
                        <div class="atlas-FieldGroup-bottom-margin">
                          <div class="atlas-Label-container atlas-Label-standardLayout">
                            <div class="">
                              <div class="atlas-Label-labelText">
                                <label class="atlas-Label-label">Text B Completion</label>
                              </div>
                            </div>
                            <div class="atlas-Label-actionElementCol"></div>
                          </div>
                          <div id="RedactedPlan-SummaryField-Redacted2-TextBCompletion"
                          class="atlas-BaseSummaryField-text">50%</div>
                        </div>
                      </div>
                    </div>
                    <div class="col-2">
                      <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2-TextBCost"
                      class="atlas-FieldGroup-width100">
                        <div class="atlas-FieldGroup-bottom-margin">
                          <div class="atlas-Label-container atlas-Label-standardLayout">
                            <div class="">
                              <div class="atlas-Label-labelText">
                                <label class="atlas-Label-label">Text B Cost</label>
                              </div>
                            </div>
                            <div class="atlas-Label-actionElementCol"></div>
                          </div>
                          <div id="RedactedPlan-SummaryField-Redacted2-TextBCost"
                          class="atlas-BaseSummaryField-text">$300.00</div>
                        </div>
                      </div>
                    </div>
                    <div class="col-2">
                      <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2-TextBDuration"
                      class="atlas-FieldGroup-width100">
                        <div class="atlas-FieldGroup-bottom-margin">
                          <div class="atlas-Label-container atlas-Label-standardLayout">
                            <div class="">
                              <div class="atlas-Label-labelText">
                                <label class="atlas-Label-label">Text B Duration</label>
                              </div>
                            </div>
                            <div class="atlas-Label-actionElementCol"></div>
                          </div>
                          <div id="RedactedPlan-SummaryField-Redacted2-Duration"
                          class="atlas-BaseSummaryField-text">0 mo</div>
                        </div>
                      </div>
                    </div>
                    <div class="col-2">
                      <div id="FieldGroup-RedactedPlan-SummaryField-Redacted2-Date"
                      class="atlas-FieldGroup-width100">
                        <div class="atlas-FieldGroup-bottom-margin">
                          <div class="atlas-Label-container atlas-Label-standardLayout">
                            <div class="">
                              <div class="atlas-Label-labelText">
                                <label class="atlas-Label-label">Date</label>
                              </div>
                            </div>
                            <div class="atlas-Label-actionElementCol"></div>
                          </div>
                          <div id="RedactedPlan-SummaryField-Redacted2-Date"
                          class="atlas-BaseSummaryField-text">3/28/2022</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12">
                      <div class="row">
                        <div class="col-2">
                          <h5 id="RedactedPlan-Heading-CreatedBy">Created By</h5>
                        </div>
                        <div class="col-1">
                          <div style="display: inline-block;">
                            <button id="RedactedPlan-TextLink-Edit" class="atlas-TextLink-text false" tabindex="0"
                            type="button">EDIT</button>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-3">
                          <h4 id="RedactedPlan-Heading-CreatedBy"
                          class="RedactedPlan_createdByHeader__3K03V">Name, Name</h4>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

const myTimeout = setTimeout(Replacer,5000);
const matches = { 'Text A': 'Text C', Text B: 'Text D' };
const replaces = Object.keys(matches).join('|');
const replacer = (s) => matches[s];
const elems = document.querySelectorAll(':scope > .atlas-SectionHeading-accentBar , :scope > atlas-Label-label');
function Replacer() { for (const elem of elems) {
  const s = elem.innerHTML;
  elem.innerHTML = s.replace(new RegExp(replaces, 'gi'), replacer);
}}

I am trying to replace the instance of Text A with Text C and all instances of Text B with Text D, but only as they are visible on the webpage, not as they appear in the tags of elements because if I just run my same code above, it will replace the elements, but then I can't use any of the menus on the page because I believe they are script-based.

The above code doesn't actually work. It only works with this line:

const elems = document.querySelectorAll('h2 , div');

But this seems to break everything, so I was trying to be more specific. The weird thing is that it doesn't break anything when I run it in console. How do I get the Chrome Extension to behave as if I were running it in console?

Please help. I can clarify if needed.

Klara Kautz
  • 11
  • 2

1 Answers1

-1

How do I get the Chrome Extension to behave as if I were running it in console?

You do this with a content script (documentation: v2, v3). Firefox's website has a good overview of browser extension file structures that goes into more detail.

Blake Gearin
  • 175
  • 1
  • 10
  • https://developer.chrome.com/docs/extensions/mv3/content_scripts/ is a page I have been referencing a lot and trying different things, but have not been able to get anywhere. Do you have any insight on what specifically I might be missing? Isn't what I am using a content script? – Klara Kautz Feb 17 '22 at 01:54
  • ```{ "manifest_version": 2, "name": "Name", "description": "Desc.", "version": "1.0", "content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_end" } ] }``` Here is my manifest if that is helpful. – Klara Kautz Feb 17 '22 at 01:58
  • The content script is whatever is specified in the manifest. So in this case, `content.js` is the file the manifest is looking for. If your code isn't a file with that name it won't load properly. The `matches` in the manifest specifies what pages the content script will load on. So before you try any JS logic it's best to add a `console.log()` statement to your content script. This way you know if your file is even present or not on the page you're testing against. – Blake Gearin Feb 17 '22 at 02:10
  • According to [this Firefox page](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns), your `matches` value of `*://*/*` is equivalent to all HTTP, HTTPS and WebSocket URLs. So if you're testing against a local HTML file the content script is likely not present as it doesn't meet the pattern specified in the manifest. – Blake Gearin Feb 17 '22 at 02:17
  • Blake, my code above is indeed in a file named content.js – Klara Kautz Feb 17 '22 at 02:49
  • Also, it is not a local HTML file. – Klara Kautz Feb 17 '22 at 02:49
  • Ok, thanks for clarifying. It looks like there are several issues here. In your `matches` variable the value `Text B` is not enclosed by quotations. If I add `console.log(s)` statement inside your `Replacer` function it doesn't print out anything. This is because function doesn't have access to your variables `matches`, `elems`, or `replacer`. When the function gets called on the first line none of those variables are defined yet. Then if you add `console.dir(elems)` you'll see that it's of length 0, indicating that your query isn't returning anything. At least based on the HTML posted above. – Blake Gearin Feb 17 '22 at 04:46
  • While I appreciate your attempts to help, the question has already been answered. – Klara Kautz Feb 17 '22 at 04:49
  • Nice. Glad to hear it! – Blake Gearin Feb 17 '22 at 05:23