使用 JavaScript 创建一个简单的 Twitter Safari 扩展 [英] Creating a simple Twitter Safari extension using JavaScript

问题描述

如何使用 Javascript 创建一个简单的 Twitter Safari 扩展?理想情况下，我想在用户向下滚动屏幕时找到推文帖子标题并更改其文本颜色.我知道 twitter 提要是动态加载的，所以我想每次为用户加载新推文时，脚本都必须执行.

How would one go about creating a simple Twitter Safari extension using Javascript? Ideally, I would like to find tweet post titles and change their text color as a user scrolls down the screen. I know the twitter feed loads dynamically, so I suppose the script would have to execute each time new tweets are loaded for the user.

我对 JavaScript 很陌生，但正在执行以下操作:

I'm very new to JavaScript, but executing something like:

var myNodelist = document.getElementsByClassName("question-hyperlink");
myNodelist[0].style.backgroundColor = "red"

将更改例如 stackoverflow.com 上的链接颜色，但不会更改 Twitter.

will change link colors on, for example, stackoverflow.com but not on Twitter.

所以我的问题是，如何在加载推文时动态抓取推文文本，以及如何改变其外观?谢谢！

So my questions would be, how does one grab tweet text dynamically as they're loaded, and how does one alter its appearance? Thanks!

推荐答案

您可以在 Firefox 或 Chrome 中使用检查器 开发者工具，用于查看给定元素的类和 ID.

You can use the inspector in the Firefox or Chrome Developer Tools to view the classes and id's of a given element.

Twitter 推文的类名是 tweet，因此，例如，以下内容将使所有推文的背景变为红色并将推文文本记录到控制台..

Twitter tweets have a classname of tweet, so for example, the following would make all the tweet's backgrounds red and log the tweet text to the console..

var myNodelist = document.getElementsByClassName("tweet");
for(var i=0; i<myNodelist.length; i++){
  // change the background to red
  myNodelist[i].style.backgroundColor = "red"

  // get the actual tweet text
  var tweet = myNodelist[i].getElementsByClassName('TweetTextSize')[0].textContent.trim();
  console.log(tweet);
}

这篇关于使用 JavaScript 创建一个简单的 Twitter Safari 扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！