我实际上正在开发我的第一个 Chrome 扩展程序即使运行顺利我收到了很多错误get()我用来检索一些数据的函数和关于代码安全性的恼人错误。
Here's a screenshot of the console log:
下面是涉及到的代码：
<!doctype html>
<html>
<head>
<title>NGI Little Helper - Subscribes</title>
<link rel="stylesheet" href="popup.css">
<!-- JavaScript and HTML must be in separate files for security. -->
<script type="text/javascript" src="common/jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<h1>Topics</h1>
<div id="content">..:: Loading ::..</div>
</body>
</html>
这个脚本开始制作一个$.get()到远程网页。变量的内容data可以被找寻到here
$.get("http://gaming.ngi.it/subscription.php?do=viewsubscription", function(data) {
var TDs = $('td[id*="td_threadtitle_"]', data);
$(document).ready(function() {
$("#content").html("<br/>");
$.each( TDs, function() {
//Removes useless elements from the source
$('img[src="images/misc/tag.png"]', this).remove();
$('span', this).remove(); //$('span[class="smallfont"]', this).remove();
$('div[class="smallfont"]', this).remove();
$('img[src="images/buttons/firstnew.gif"]', this).attr('src', '/img/icons/comment.gif');
$('a[style="font-weight:bold"]', this).removeAttr("style");
//Modify the lenght of the strings
if ($("a[id^='thread_title_']", this).text().length > 35) {
$("a[id^='thread_title_']", this).text( $("a[id^='thread_title_']", this).text().substring(0, 30) + " [...]" );
}
//Modify the URL from relative to absolute and add the target="_newtab"
$("a[id^='thread_']", this).attr('href', "http://gaming.ngi.it/"+ $("a[id^='thread_']", this).attr('href'));
$("a[id^='thread_']", this).attr('target', "_newtab");
//Send the HTML modified to the popup window
$("#content").html($("#content").html() + $('div', this).wrap("<span></span>").parent().html() +"<br/>" );
});
});
});
Here经过 jquery 的所有操作后，您可以找到 HTML。
老实说，我无法理解为什么会显示这些错误，尤其是与安全相关的错误。我没有在 popup.html 中使用任何内联代码。
{
"name": "NGI Little Helper",
"version": "0.8.5",
"manifest_version": 2,
"description": "Extension per gli Utenti del forum gaming.ngi.it",
"options_page": "fancy-settings/source/index.html",
"background": {
"page": "background.html"
},
"icons": {
"16": "img/logo16.png",
"48": "img/logo48.png",
"128": "img/logo128.png"
},
"content_scripts": [{
"matches": ["*://gaming.ngi.it/*"],
"js": ["common/jquery.js", "logo_changer/logo_change.js"],
"run_at": "document_start"
}],
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html",
"default_title": "Visualizza Subscriptions"
},
"permissions": [
"*://gaming.ngi.it/*"
]
}
以下是一段 HTML 代码，在所有操作之后将呈现到弹出窗口中。一切div与此类似，只是 url 发生变化：
<div>
<a href="http://gaming.ngi.it/showthread.php?goto=newpost&t=555954" id="thread_gotonew_555954" target="_newtab"><img class="inlineimg" src="/img/icons/comment.gif" alt="Go to first new post" border="0"></a>
<a href="http://gaming.ngi.it/showthread.php?goto=newpost&t=555954" id="thread_title_555954" target="_newtab">[All Gamez] [Frozen Synapse] S [...]</a>
</div>
如果需要我可以提供完整的源代码。
让我们从最简单的问题开始：
$('div', this)选择全部<div>a 内的元素<td>。在里面源代码您提供的，可以找到以下事件处理程序：
<div class="smallfont">
<span style="cursor:pointer" onclick="window.open('member.php?u=47995', '_self')">K4raMong</span>
</div> 默认情况下内容安全政策，这是禁止的。要消除该错误，只需在将属性插入文档之前删除该属性即可：
element.removeAttribute('onclick'); // in jQuery: $element.removeAttr('onclick');
在 jQuery/JavaScript 操作 DOM 之前，必须先对其进行解析。在您的代码中，这项工作是隐式完成的var TDs = $(.., data)。线。该解析大约等于：
var dummy = document.createElement('div'); // Container
dummy.innerHTML = data;
听说过预加载图像吗？这是缓存图像的一个有用功能，以便它们在需要时准备就绪。这可以使用以下方法完成(new Image).src='...';。所创建的<img>元素不必插入到文档中。
就您而言，这是不需要的行为，因为这些图像是在您的扩展中查找的。这是由于您的网页使用了相对 URL，而不是绝对的。使用相对 URL 时，资源的预期位置取决于当前文档的位置。
Do not使用 jQuery。由于您正在编写 Chrome 扩展程序，因此无需担心跨浏览器兼容性。 jQuery 使用innerHTML解析 HTML 的技巧，但失败了，正如我之前所展示的。
JavaScript 有DOMParser对象，从 Chrome 30 开始可以按如下方式使用：
var doc = (new DOMParser).parseFromString(data, 'text/html');
您可以使用以下命令跳过从字符串到文档的手动转换responseType属性，如下图所示。
如您所知，Chrome 扩展程序中可以进行跨站点请求，前提是将 URL 正确添加到permissions清单文件中的部分。我们将使用 XMLHttpRequest level 2 中引入的一个功能，即responseType属性.
// Fetching data
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://gaming.ngi.it/subscription.php?do=viewsubscription');
xhr.onload = function() {
var doc = xhr.response;
// Now, you can use jQuery, since the string has been parsed.
...
};
xhr.responseType = 'document'; // Chrome 18+
xhr.send();
您可以轻松地重写代码以使用本机 DOM 和 JavaScript 而不是 jQuery。大多数使用 jQuery 作为选择器引擎，但最常见的是，它也可以使用element.querySelectorAll。获取文档后使用var doc = xhr.response;， 请执行下列操作：
var TDs = doc.querySelectorAll('td[id*="td_threadtitle_"]');
var html = '';
[].forEach.call(TDs, function(td) {
// etc, etc. Do your job
});
你有看到var html = '';？无论您是否使用 jQuery，这都是一个很好的做法。永远不会做element.innerHTML += ...;甚至更糟$element.html($element.html() + ...);循环中。浏览器将很难一遍又一遍地渲染它，并且您（作为用户）会注意到性能下降。