Chrome扩展插件替换单词/短语

Question

<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);
}}

我试图用文本C替换文本A的实例，用文本D替换文本B的所有实例，但仅当它们在网页上可见时，而不是当它们出现在元素的标签中时，因为如果我只是运行上面的相同代码，它会替换元素，但我不能使用页面上的任何菜单，因为我认为它们是基于脚本的。

上面的代码实际上不起作用。它只适用于以下行：

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

但这似乎打破了一切，所以我试图说得更具体一些。奇怪的是，当我在控制台中运行它时，它不会破坏任何东西。我如何让Chrome扩展表现得像在控制台中运行它一样？

请帮忙。如果需要，我可以澄清。

Answer 1

我如何让Chrome扩展的行为就像我在控制台中运行它一样？

您可以使用内容脚本(文档：v2，v3(来完成此操作。Firefox的网站对浏览器扩展文件结构有一个很好的概述，更详细。