Chrome扩展程序谁修改html与"if"，"add"命令

Question

我不是一个熟练的程序员，这就是为什么我的解释将是简单和基本的。

我想制作一个个人的谷歌浏览器扩展程序，在我不拥有的网页中进行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"]
    }]
}

内容脚本.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

好的，您已经更新了问题。尝试在内容脚本中放入以下内容.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

尝试查看上面提供的代码并阅读有关使用的各种函数的文档。否则你永远不会学到...

如果您阅读有关查询选择器和选择器的文档，您会发现要查找标题节点，您可以按如下方式修改上面的代码：

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>标记。

Answer 2

你不能

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