Question

我正在尝试为twitter开发chrome扩展程序。我遇到了这个问题并尝试了我在网上找到的所有东西，但仍然没有解决问题。

以下是详细说明。

我使用content_scripts注入自己的js代码来操作twitter网页上的div。

源代码是这样的：

的manifest.json

   "content_scripts": [ { 
      "js": [ "jquery.js", "code.js" ],
      "matches": [ "http://*.twitter.com/*", "https://*.twitter.com/*" ]
   } ],

code.js

function JSCode()
{  
/* my own jquery code here */
}

$(document).ready(function() {
var node = document.createElement('script');
var toInject = "("+JSCode.toString()+")();";

node.innerText = toInject ;
document.querySelector('body').appendChild(node);
});

我调试源代码twitter页面，

<script>/*my own jquery code here */</script>
</body>

始终位于body标签的底部。

如果我只是在chrome地址栏中输入twitter.com或twitter.com/user_name，点按即可，javascript工作正常。

如果我已经在twitter.com网页上（js代码在第一次加载网页时有效），我点击我自己的个人资料链接并重定向到我自己的Twitter页面，这将在同一个chrome网页上，javascript似乎没有执行（虽然js代码仍然附加在正文的底部），只有重新加载整个网页才能使javascript再次运行。

有关为何如此的建议以及如何解决此问题？谢谢

Answer 1

按Ctrl + Shift + j - 这将打开控制台并显示任何脚本错误。您应该可以轻松地从那里缩小范围。（或转到右上角的工具 - ＆gt; JavaScript控制台中的chrome 3 bar菜单）

如果你正在使用jQuery，你也可以这样做......

$(document).ready(function() {
    $('body').append($('<script>').html('('+JSCode.toString()+')();'));
});

...所以我们发现JSCode中的代码正在被加载并且正常运行......但是当新元素被添加到文档中时，CSS并没有“神奇地”应用于它们（当然这是应该如何）。将新元素添加到文档的头部，并在其中进行所需的更改，保持对整个文档中所有新创建的元素的持久性...我将首先显示好的示例，然后是不按预期工作的方式。 ..

$('head').append($('<style>.fullname { color: red; border: 2px dotted green; }</style>'));

以下在此动态加载页面中效果不佳...

$(".fullname").css({color:"red", border:"2px dotted green"});

注入javascript并不总是有效

1 个答案: