在 chrome 扩展中更改推文的文本答案

【问题标题】：Change texts of tweets in a chrome extension在 chrome 扩展中更改推文的文本
【发布时间】：2023-03-26 09:41:01
【问题描述】：

我正在制作一个 chrome 扩展来更改推文的文本我使用

检索并更改 .js 文件中的推文文本

var tweets = document.getElementsByClassName('js-tweet-text tweet-text');
for (var i = 0, l = tweets.length; i < l; i++) {
    tweets[i].innerText = 'Some text';
}

页面加载时加载的推文更改为“某些文本”，但当我向下滚动时，加载的新推文没有改变。如何更改新的推文文本？

编辑：我尝试添加一个计时器：

var tweets = document.getElementsByClassName('js-tweet-text tweet-text');
var timer = setInterval(changeTexts, 1000);

function changeTexts() {
for (var i = 0, l = tweets.length; i < l; i++) {
    tweets[i].innerText = 'Some Text';
}
}

但这会加载 html 上的所有推文，我只想修改新的而不是修改已经修改的推文。

【问题讨论】：

标签： javascript html google-chrome twitter google-chrome-extension

【解决方案1】：

卢克，请使用MutationObserver：

var root = document.querySelector('#fTweets'),
    tweetBody = document.querySelector('#fTweetBody'),
    sendBtn = document.querySelector('#fSendBtn'),
    
    pushTweet = _ => root.insertAdjacentHTML('beforeend', `<div class='fTweet'>${tweetBody.value}</div>`);
sendBtn.addEventListener('click', e => pushTweet());

// This function changes the new tweet
let editTweet = e => e.innerHTML += '| Edited by me';

// Immediately after loading change downloaded tweets
// Do not forget about the availability of DOM
Array.from(root.children).forEach(e => editTweet(e));

// Create a MutationObserver instance
new MutationObserver(function(mutations) {
  // We process all the changes of the root node
  mutations.forEach(mutation => {
    // If this change units, then send a new node for processing
    // Note: There is no inspection, that to this example, but be sure to check what and where nodes are in real code
    if(mutation.type === 'childList'){
      mutation.addedNodes.forEach(item => editTweet(item));
    }
  });
}).observe(root, {childList: true});

<div id='fTweets'><div class='fTweet'>First tweet...</div></div><hr />
<textarea placeholder='Your tweet...' id='fTweetBody'></textarea><br />
<input type='button' id='fSendBtn' value='Send' />

【讨论】：