如何让 Google Chrome 扩展程序运行 jQuery 脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5032559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Google Chrome extension to run jQuery Script
提问by JD Isaacks
I have this jquery script:
我有这个 jquery 脚本：
$('[id^=changesetList] tr').each(function () {
var sid = $(this).attr('sid');
$(this).find('td span.changesetDescription').append('<span class="csetHash">' + sid + '</span>').css('color','#777');
});
I want to run this when I visit kilnhg.com.
我想在访问 kilnhg.com 时运行它。
I put in in a kiln_hash.user.jsfile and installed it into Chrome but it doesn't do anything.
我放入一个kiln_hash.user.js文件并将其安装到 Chrome 中，但它什么也没做。
I think this might be because it requires jQuery.
我认为这可能是因为它需要 jQuery。
I have read a few tutorials and it looks like I might need to create a manifest.jsonfile and put that and the .user.jsfile into a zip file with a .crxextension.
我已经阅读了一些教程，看起来我可能需要创建一个manifest.json文件并将该.user.js文件和该文件放入带有.crx扩展名的 zip 文件中。
I still do not know what I would need to put in the manifest file.
我仍然不知道我需要在清单文件中放入什么。
How can I get this to work?
我怎样才能让它工作？
Update
更新
I created a manifest.jsonfile:
我创建了一个manifest.json文件：
{
"name": "Kiln Hash",
"version": "1.0.1",
"description": "Show hash in changeset list in Kiln",
"content_scripts": [
{
"matches": ["https://*.kilnhg.com/*"],
"js": ["jquery.js"]
}
],
"background_page": "bg.html"
}
I include jquery.jsfile (version 1.4.2) and the bg.htmlfile:
我包含jquery.js文件（版本 1.4.2）和bg.html文件：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$(hash_link).click(function(){
addHash();
return false;
});
});
function addHash()
{
$('[id^=changesetList] tr').each(function () {
var sid = $(this).attr('sid');
$(this).find('td span.changesetDescription').append('<span class="csetHash">' + sid + '</span>').css('color','#777');
});
}
</script>
<title>Untitled Document</title>
</head>
<body>
<a id="hash_link" href="#">Add Hash</a>
</body>
</html>
I packaged this in a zip with .crx extension and when I drag the file into Chrome it asks me if I want to install I say yes. It then tells me "bad magic number"
我将它打包在一个带有 .crx 扩展名的 zip 文件中，当我将文件拖入 Chrome 时，它会问我是否要安装，我说是。然后它告诉我“坏幻数”
So I go to the Chrome developer dashboard and upload the zip, it accepts it, It makes my pay $5 to upload and then it installs. but it still does nothing.
所以我去 Chrome 开发者仪表板并上传 zip，它接受它，它让我支付 5 美元来上传然后安装。但它仍然什么都不做。
回答by serg
You not only might need a manifest, manifest is an absolutely necessary part of any extension. I hate to say that, but you probably need to read a little more about extension structure first, and all your questions will be answered.
您不仅可能需要清单，而且清单是任何扩展程序中绝对必要的一部分。我不想这么说，但您可能需要先阅读更多关于扩展结构的内容，您的所有问题都会得到解答。
- Overview(what's inside extension and what is manifest)
- Content Scripts(how to include script into a specific domain with jquery)
(I can provide you an answer if you like, but it would be more beneficial for you to read those links yourself, it's all described and explained there in great details)
（如果您愿意，我可以为您提供答案，但您自己阅读这些链接会更有益，所有内容都在那里进行了详细描述和解释）
UPDATE
更新
To locally install your extension you don't need to archive it, just go to your extensions chrome://extensions/, click "Developer mode", "Load unpacked extension" button, and then point it to your extension folder.
要在本地安装您的扩展程序，您不需要对其进行存档，只需转到您的扩展程序chrome://extensions/，单击“开发人员模式”、“加载解压的扩展程序”按钮，然后将其指向您的扩展程序文件夹。
If you want to inject a script to some page you need to use what's called "content scripts". Your manifest should look like this:
如果您想将脚本注入某个页面，您需要使用所谓的“内容脚本”。您的清单应如下所示：
{
"name": "Kiln Hash",
"version": "1.0.1",
"description": "Show hash in changeset list in Kiln",
"content_scripts": [
{
"matches": ["https://*.kilnhg.com/*"],
"js": ["jquery.js", "content_script.js"]
}
]
}
content_script.js:
content_script.js：
$('[id^=changesetList] tr').each(function () {
var sid = $(this).attr('sid');
$(this).find('td span.changesetDescription').append('<span class="csetHash">' + sid + '</span>').css('color','#777');
});
This content script would run on your specified domain after DOM is loaded and jquery is injected.
在加载 DOM 并注入 jquery 后，此内容脚本将在您指定的域上运行。
You don't need a background page for this.
您不需要为此设置背景页面。
