如何在线程上写入contenteditable div

Question

我正在尝试创建一个 Chrome 扩展程序，可以将文本写入 Threads.net 上线程的“回复”字段。这是一个

contenteditable

div，据我所知，我需要编辑下一个

p

元素的文本。

<div class="xzsf02u xw2csxc x1odjw0f x1n2onr6 x1hnll1o xpqswwc notranslate" contenteditable="true" role="textbox" spellcheck="true" tabindex="0" data-lexical-editor="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;">
  <p class="xdj266r x11i5rnm xat24cr x1mh8g0r"><br></p>
</div>

我尝试过

innerHTML

，

innerText

，

textContent

。我尝试复制该元素，删除原始元素，用我的替换它......这些都不起作用。

Answer 1

创建 Chrome 扩展程序来操作页面内容涉及使用 JavaScript，并且您需要将脚本注入页面中。这是一个简单的内容脚本示例，您可以将其包含在扩展中以修改 contenteditable div 内的文本：

1. 为您的扩展创建一个新文件夹，并添加包含以下内容的 manifest.json 文件：

   { “清单版本”：2， "name": "Threads.net 扩展", “版本”：“1.0”， "description": "自定义 Threads.net", “权限”：[“activeTab”]， “浏览器操作”：{ "default_icon": "图标.png", "default_popup": "popup.html" }, “内容脚本”：[ { “匹配”：[“://threads.net/”]， "js": ["内容.js"] } ] }

2. 创建一个包含以下内容的 content.js 文件：

   //内容.js

   //等待 DOM 准备好 document.addEventListener("DOMContentLoaded", function () { // 选择contenteditable div var contentEditableDiv = document.querySelector(".notranslate[contenteditable=true]");

   if (contentEditableDiv) { // 修改p元素内的文本 var paragraph = contentEditableDiv.querySelector("p"); 如果（段落）{ paragraph.innerText = "这里是您的自定义文本！"; } } });

3. 创建一个简单的 HTML 文件 popup.html，其中包含一个按钮来触发脚本：

   按钮 { 内边距：10px； } 修改内容

4. 创建popup.js文件来处理按钮点击事件：

   //popup.js

   document.getElementById("modifyContentButton").addEventListener("click", function () {
     // Execute the content script in the active tab
     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
       chrome.tabs.executeScript(tabs[0].id, { file: "content.js" });
     });
   });
   

将图标图像保存为扩展文件夹中的 icon.png。 现在，通过转到 chrome://extensions/，启用“开发人员模式”并选择“加载已解压的文件”，在 Chrome 中加载您的扩展程序。选择您的扩展文件夹。

加载扩展程序后，访问https://threads.net，然后单击工具栏中的扩展程序图标。单击弹出窗口中的“修改内容”按钮应更新 contenteditable div 内的文本。 希望这对你有帮助。