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

llycmphe  于 6个月前  发布在  jQuery
关注(0)|答案(2)|浏览(83)

我想动态添加一个按钮在DOM的Twitter的时间轴,这样将有一个按钮,每个鸣叫。
如何才能做到这一点?
我使用document.createElement("div")创建了一个div
现在,我如何让它附加到每条推文?

3ks5zfa0

3ks5zfa01#

你要求我们为你做所有的工作。但是一个简短的提示,获取tweets的类,然后将元素附加到那个div,并使用CSS定位它。

fykwrbwg

fykwrbwg2#

创建一个Chrome扩展程序,为Twitter时间轴上的每条推文添加一个按钮,需要几个步骤。下面是一个高级概述:
1.为您的Chrome扩展程序创建一个新目录。
1.在目录中创建一个manifest.json文件。此文件提供有关Chrome扩展的重要信息。
1.创建一个content.js文件,在这里您将编写JavaScript代码来操作Twitter页面的DOM。
1.在content.js中编写代码,为每个tweet添加一个按钮。
1.将扩展加载到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"]
    }
  ]
}

字符串
content.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://扩展。
1.通过单击右上角的切换开关启用开发者模式。
1.单击加载未打包的按钮并选择您的扩展目录。
现在,当你导航到Twitter时,你应该会看到你的按钮被添加到每个tweet中。请注意,这是一个非常基本的例子,由于Twitter DOM的动态特性,它可能无法完美工作。你可能需要使用MutationObserver来处理新加载的tweet。

相关问题