google-chrome-extension - 如何在加载网页之前运行内容脚本？

Question

我想更改一些 dom 内容，使所有输入字段值都是网页的 "" ，然后用户才能看到它。我该怎么做？有什么办法可以做到这一点吗？谢谢。

Answer 1

您需要一个在 document_start 上运行的内容脚本，以及以下两种方法之一:

1. MutationObserver ( the docs )，但它会减慢页面加载速度:
   • How to change the HTML content as it's loading on the page
   • Modify page element as soon as it's loaded

2. 添加 CSS 样式覆盖以使 INPUT 文本透明，并在加载页面时清除元素并删除样式:

   manifest.json:

   "content_scripts": [{
       "matches": ["<all_urls>"],
       "run_at": "document_start",
       "all_frames": true,
       "js": ["content.js"]
   }],
   

   内容.js:

   // document is empty now so we'll only add the style
   var style = document.documentElement.appendChild(document.createElement('style'));
   style.textContent = 'input {color: transparent !important;}';
   
   // once DOM is ready clear the inputs
   document.addEventListener('DOMContentLoaded', function() {
       var inputs = document.getElementsByTagName('input');
       for (var i = inputs.length; --i >= 0; ) {
           var input = inputs[i];
           if (input.value) {
               input.value = '';
           }
       }
       style.remove();
   });