-1

我不是一个熟练的编码器，这就是为什么我的解释会简单而基本。

我想制作一个个人 Google Chrome 扩展程序，在我不拥有的网页中进行 HTML 更改。我不在乎它是非优化的还是丑陋的代码。我只是想让它工作。多写，别怕我。

代码必须检测变量“title="xxxx"，然后它会添加对代码的更改。

例如，如果：

<h2>
<a href="/car/bmw" class="secondaryPageLink" title="BMW's page">BMW</a>
</h2>

<div class="age">
<p>2005</p>

然后它被替换为：

<h2>
<a href="/car/bmw" class="secondaryPageLink" title="BMW's page">BMW</a>
</h2>

<div class="age">
<p>250000,00$</p>
<p>2005</p>

如果：

<h2>
<a href="/car/mercedes" class="secondaryPageLink" title="Mercedes's page">Mercedes</a>
</h2>

<div class="age">
<p>1987</p>

然后它被替换为：

<h2>
<a href="/car/mercedes" class="secondaryPageLink" title="Mercedes's page">Mercedes</a>
</h2>

<div class="age">
<p>750000,00$</p>
<p>1987</p>
4

2 回答 2

1

至少您将需要以下文件：

清单.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>标签。

于 2013-01-26T15:43:45.300 回答
0

您不能在 html 中执行此操作。它必须使用可以处理循环结构的实际编程语言来完成。html 是纯粹的框架代码。它不支持条件语句。不幸的是，此时您可能无法掌握编程语言的概念。我建议你先熟悉 html 和 css。用它们构建一些简单的静态网页，这些网页只是展示内容，然后按照自己的方式开始添加功能，就像你正在谈论的使用编程语言的功能一样。

于 2013-01-26T15:40:28.113 回答