少なくとも、次のファイルが必要です。
マニフェスト.json
{
"name": "Personal Extension",
"version": "0.1.0",
"manifest_version": 2,
"description": "Replaces HTML with something.",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentscript.js"]
}]
}
contentscript.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"]');
次に age ノードを見つけるために、その親と親の次の要素を検索できます。
ageNode = titleNode.parentNode.nextElementSibling;
これを示すjsfiddle の例を次に示します。
また、もう一度 HTML が正しくありません。タグが適切に閉じられていません<h2></h2>。