至少您将需要以下文件：
清单.json
{
"name": "Personal Extension",
"version": "0.1.0",
"manifest_version": 2,
"description": "Replaces HTML with something.",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentscript.js"]
}]
}
内容脚本.js
// Using a regular expression here to avoid case sensitivity problems,
// and to match for line breaks and whitespace after <div class="age">
var str1 = /<div class="age">\s*?<p>2005<\/p>/gi,
str2 = '<div class="age"><p>250000$</p><p>2005</p>';
// We don't really want to deal with frames...
if (document.body.nodeName === 'BODY') {
document.body.innerHTML = document.body.innerHTML.replace(str1, str2);
}
这是一个有效的jsfiddle。
将这两个文件放在一个文件夹中，然后使用 Chrome 中的“加载解压扩展程序”按钮。
我想公平地说：警告，这是一个非常粗略的解决方案。它很丑陋，在某些情况下可能会中断，但你说你不关心代码质量......所以就在这里。
此外，您提供的 HTML 代码无效。它应该是：
<div class="car">
<a title="bmw"></a>
</div>希望它在代码后面的某个地方关闭。
编辑#1
好的，您已经更新了问题。尝试将以下内容放入 contentscript.js：
var titleNode, // placeholder for a title node we're going to look for
priceNode, // placeholder for a price node we're going to create
ageNode, // placeholder for an age node where we will append the price node
carBrand,
carPrices = { // you can also use an array...
'bmw': 250000,
'mercedes': 300000
// add more cars and prices here
};
for (carBrand in carPrices) {
// Don't look down the object's prototype chain:
if (carPrices.hasOwnProperty(carBrand)) {
// Find a title node that's inside a <div class="car">,
// and has a title we're looking for in this iteration:
titleNode = document.querySelector('div.car>a[title=' +
carBrand + ']');
// Make sure the title node is found and that it has a parent:
if (titleNode && titleNode.parentNode) {
// Find the age node:
ageNode = titleNode.parentNode.querySelector('div.age');
// Check if the <div class="age"> node is really there:
if (ageNode) {
priceNode = document.createElement('p');
priceNode.innerHTML = carPrices[carBrand] + '$';
ageNode.appendChild(priceNode);
}
}
}
}
这是更新的 jsfiddle 示例。
编辑#2
尝试查看上面提供的代码并阅读有关使用的各种函数的文档。否则你永远学不会...
如果您阅读有关querySelector和选择器的文档，您会发现要找到标题节点，您可以将上述代码修改如下：
titleNode = document.querySelector('h2>a[title="BMW\'s page"]');
...或通过可以在href属性中找到的纯品牌名称进行查找：
titleNode = document.querySelector('h2>a[href$="bmw"]');
然后要找到年龄节点，可以查找它的父节点和父节点的下一个元素：
ageNode = titleNode.parentNode.nextElementSibling;
这是一个演示它的jsfiddle 示例。
此外，您的 HTML 再次不正确。您没有正确关闭<h2></h2>标签。