Question

I’m not a skillful coder, that’s why my explanation is going to be easy and basic.

I want to make a personal Google Chrome extension that makes HTML changes in a web page i don’t own. I don’t care if it’s non-optimized or ugly code. I just want to make it work. Write a lot, don’t fear me.

The code have to detects the variable “title=”xxxx”, and then it will add a change to the code.

For example, if:

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

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

Then it’s replaced with:

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

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

if:

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

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

Then it’s replaced with:

<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

At the very least you will need the following files:

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);
}

Here’s a jsfiddle that works.

Place both of these files into a folder and use the “load unpacked extension” button in Chrome.

I guess it’s fair to say: warning, this is a very crude solution. It’s ugly and will probably break in some cases, but you said you don’t care about code quality… so here it is.

Also, the HTML code you provide is invalid. It should be:

<div class="car">
<a title="bmw"></a>

And hopefully it gets closed with </div> somewhere later in the code.

EDIT #1

Okay, you’ve updated the question. Try putting the following in the 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);
            }
        }

    }
}

Here’s the updated jsfiddle example.

EDIT #2

Try looking at the code provided above and reading documentation on various functions that are used. You will never learn otherwise…

If you read documentation on querySelector and selectors you will figure out that to find a title node you can modify the above code as follows:

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

… or to find by pure brand name that can be found in the href attribute:

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

Then to find the age node, you can look up its parent and the next element of the parent:

ageNode = titleNode.parentNode.nextElementSibling;

Here’s a jsfiddle example that demonstrates it.

Also, once again your HTML is incorrect. You haven’t properly closed the <h2></h2> tags.