Question

我已经坚持了2天，所以任何帮助都会非常感激。

我正在尝试构建一个chrome插件，它将修改id ='MTG_INSTR $ 2'的元素的文本。问题似乎是此元素仅在执行某些javascript后加载。即使我等待加载此元素，当我的插件执行此行时，

{
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "manifest_version": 2,
  "name": "extensiontest",
  "version": "0.2",
  "content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["jquery-3.2.1.min.js","content.js"]
  }
],
"browser_action": {
  "default_icon": "icon.png",
    "default_popup":"popup.html"
},

"permissions": [
    "tabs"
  ]
}

els为null。我已经附上了下面的完整代码。

PS：在chrome中调试时，我可以看到它有正确的文档，并且MTG_INSTR $ 2 id在文档中

manifest.json

chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        if( request.message === "start" ) {
         start();
             }
      }
    );

    function start(){       
        var els = document.getElementById('#MTG_INSTR$2'); //first sign of the issue, els is always left null
        console.log(els);
        alert("started");
    }

content.js

$(document).ready(function(){
    $('body').on('click', '#button1', function(){
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
   });
});
});

popup.js

<!DOCTYPE html>
<html>

<head>
<script src = "jquery-3.2.1.min.js"></script>
<script src="popup.js"></script>
</head>

<body>
<input id="button1" type=button value=clickme></input>
</body>

</html>

popup.html

/^([a-zA-Zа-яёА-ЯЁ]+[,.]?[ ]?.*[a-zа-яёА-ЯЁ]|[a-zа-яёА-ЯЁ]+['-]?.*[a-zа-яёА-ЯЁ])+$/i

Answer 1

您需要删除哈希：

var els = document.getElementById('#MTG_INSTR$2');

好方法是：

var els = document.getElementById('MTG_INSTR$2');

Chrome插件 - 如何从内容脚本修改网页上动态添加的内容

1 个答案: