How to make Google Chrome extension to run jQuery Script
I have this jquery script:
$('[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.
I put in in a kiln_hash.user.js file and installed it into Chrome but it doesn't do anything.
I think this might be because it requires jQuery.
I have read a few tutorials and it looks like I might need to create a manifest.json file and put that and the .user.js file into a zip file with a .crx extension.
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.json file:
{
"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.js file (version 1.4.2) and the bg.html file:
<!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"
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.
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.
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:
$('[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.
You don't need a background page for this.
加载中,请稍侯......
精彩评论