如何通过 Chrome 扩展在 Twitter 时间轴上的每条推文中添加按钮

Question

我想在 Twitter 时间线的 DOM 中动态添加一个按钮，以便每条推文都有一个按钮。
这怎么办？
我使用

document.createElement("div")

创建了一个 div 现在，我如何将其附加到每条推文中？

Answer 1

您要求我们为您完成所有工作。但有一个简单的提示，获取推文的类，然后将元素附加到该 div 并使用 CSS 来定位它。

Answer 2

创建一个 Chrome 扩展程序，为 Twitter 时间轴上的每条推文添加一个按钮，涉及几个步骤。以下是高级概述：

1. 为您的 Chrome 扩展程序创建一个新目录。
2. 在目录中创建manifest.json文件。此文件提供有关 Chrome 扩展程序的重要信息。
3. 创建一个 content.js 文件。您将在此处编写操作 Twitter 页面 DOM 的 JavaScript 代码。
4. 在 content.js 中编写代码，为每条推文添加一个按钮。
5. 将您的扩展加载到 Chrome 中并在 Twitter 上进行测试。

这是一个如何实现这一点的简单示例：

manifest.json

{
  "manifest_version": 2,
  "name": "Twitter Button Adder",
  "version": "1.0",
  "permissions": ["https://twitter.com/*"],
  "content_scripts": [
    {
      "matches": ["https://twitter.com/*"],
      "js": ["content.js"]
    }
  ]
}

内容.js

// Wait for the DOM to load
window.addEventListener('load', function() {
  // Get all tweets
  var tweets = document.querySelectorAll('div[data-testid="tweet"]');
  
  // Loop through each tweet
  tweets.forEach(function(tweet) {
    // Create a new button
    var button = document.createElement('button');
    button.textContent = 'My Button';
    
    // Append the button to the tweet
    tweet.appendChild(button);
  });
});

要将您的扩展程序加载到 Chrome 中：

1. 打开 Chrome 并导航至 chrome://extensions。
2. 单击右上角的切换开关启用开发者模式。
3. 单击加载解压按钮并选择您的扩展目录。

现在，当您导航到 Twitter 时，您应该会看到您的按钮已添加到每条推文中。请注意，这是一个非常基本的示例，由于 Twitter DOM 的动态特性，可能无法完美运行。您可能需要使用 MutationObserver 来处理新加载的推文。