Question

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

我想制作个人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>

Answer 1

至少你需要以下文件：

<强>的manifest.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);
            }
        }

    }
}

这是 updated jsfiddle example 。

编辑＃2

尝试查看上面提供的代码并阅读有关所使用的各种功能的文档。你永远不会学习......

如果您阅读querySelector和selectors上的文档，您将会发现要查找标题节点，您可以按如下方式修改上述代码：

titleNode = document.querySelector('h2>a[title="BMW\'s page"]');

...或者通过href属性中的纯品牌名称查找：

titleNode = document.querySelector('h2>a[href$="bmw"]');

然后要查找年龄节点，您可以查找其父节点和父节点的下一个元素：

ageNode = titleNode.parentNode.nextElementSibling;

这是展示它的 jsfiddle example 。

此外，您的HTML再次错误。您尚未正确关闭<h2></h2>代码。

Answer 2

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

Chrome扩展程序使用“if”，“add”命令修改html

2 个答案:

编辑＃1

编辑＃2