chrome extension 如何使用生命周期保存页面DOM加载完成?

17 min read

可以使用chrome extension的生命周期函数来保存页面DOM加载完成的状态，具体步骤如下：

  1. 在manifest.json中声明content_scripts，指定需要监听的页面URL和需要注入的脚本文件。
{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["https://www.example.com/*"],
      "js": ["content.js"]
    }
  ]
}
  1. 在content.js中监听页面DOM的load事件，并使用chrome.runtime.sendMessage()发送消息通知extension的background脚本页面DOM已加载完成。
window.addEventListener('load', function() {
  chrome.runtime.sendMessage({message: 'DOM_LOADED'});
});
  1. 在background.js中接收消息，并在chrome.runtime.onMessage.addListener()回调函数中处理。
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if(message.message === 'DOM_LOADED') {
    // 在这里保存页面DOM加载完成的状态
  }
});

通过这种方式，即可在chrome extension的生命周期中保存页面DOM加载完成的状态。