Make Chrome Extension to replace div with specific class

Question

Hi i want to create a chrome extension that will automatically replace a div with a specific class to another div.There is an online CAD software called Ondrive and i want to see a modified version of its menu.

Note the div to be replaced and the resulting will contain several more elements inside (so a lot of markup like divs, svg images, text and links)

There is a nice tutorial in the link below to replace text, but i don't know how to modify it for something that complex

https://9to5google.com/2015/06/14/how-to-make-a-chrome-extensions/

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
var element = elements[i];

for (var j = 0; j < element.childNodes.length; j++) {
    var node = element.childNodes[j];

    if (node.nodeType === 3) {
        var text = node.nodeValue;
        var replacedText = text.replace(/[word or phrase to replace here]/gi, '[new word or phrase]');

        if (replacedText !== text) {
            element.replaceChild(document.createTextNode(replacedText), node);
        }
    }
}
}

I modified it to be

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
var element = elements[i];

for (var j = 0; j < element.childNodes.length; j++) {
    var node = element.childNodes[j];

    if (node.nodeType === 3) {
        var text = node.nodeValue;
        var replacedText = text.replace(/<div command-id="extrude" data-id="5978b990310f18a3a66ada29" data-placement="bottom" data-original-title="Extrude (Shift-e)" data-expanded-content="" data-html="true" data-expand-delay="2000" tooltip-dynamic-snippet-id="" class="tool is-activatable is-button" data-original-expanded-content="Create, add to, subtract from, or intersect parts by extruding sketch regions or planar faces, or surfaces by extruding lines or curves.<ol><li>Select regions or faces, or sketch edges.</li><li>Specify whether to create a new part or surface, add, remove, or intersect with existing parts</li><li>Specify the distance or the entity to extrude up to.</li></ol>"><!----> <div><svg xmlns="http://www.w3.org/2000/svg" class="os-svg-icon"><use xlink:href="#svg-icon-extrude-button"></use></svg></div> <span class="tool-label hide-in-toolbar"> Extrude </span> <!----> <!----></div>/gi, '<div command-id="revolve" data-id="5978b990310f18a3a66ada2a" data-placement="bottom" data-original-title="Revolve" data-expanded-content="" data-html="true" data-expand-delay="2000" tooltip-dynamic-snippet-id="" class="tool is-activatable is-button" data-original-expanded-content="Create, add to, subtract from, or intersect parts by revolving sketch regions or planar faces about a central axis, or surfaces by revolving lines and curves about a central axis.<ol><li>Select one or more sketch regions, faces, or edges.</li><li>Specify whether to create a new part or surface, and to add, remove, or intersect with existing parts.</li><li>Select a sketch line or edge as the axis to revolve about.</li></ol>"><!----> <div><svg xmlns="http://www.w3.org/2000/svg" class="os-svg-icon"><use xlink:href="#svg-icon-revolve-button"></use></svg></div> <span class="tool-label hide-in-toolbar"> Revolve </span> <!----> <!----></div>');

        if (replacedText !== text) {
            element.replaceChild(document.createTextNode(replacedText), node);
        }
    }
}
}

This didn't work at all. There is a hashtag # after which the code is invalid (but i have to use). Also i am not sure if this is the most elegant solution to replace code

Hey Alkis. Welcome to SO. Cool idea for a project. But it's impossible for us to help you with your problem. I suggest you try to make an attempt and go as far as you can go with it. When you encounter a problem which you can't figure out, come back with it and we'll try to help you. Good luck! — Emiel Zuurbier, Sep 07 '19 at 00:37
You want to make, that sounds great. You have a tutorial, so you can make it on your own. Would you explain what's the problem you are facing during your journey of creation. — Md Rafee, Sep 07 '19 at 00:39

wOxxOm · Answer 1 · 2019-09-07T07:42:48.203

The code in the question is to replace the text contents, which is what's between the tags, it cannot search HTML and cannot create a new element/tag.

You need to use querySelector or querySelectorAll and make use of the innerHTML.
Here's the entire code:

const replacement = document.createElement('div');
replacement.innerHTML =
  `<div command-id="revolve"
       data-id="5978b990310f18a3a66ada2a"
       data-placement="bottom"
       data-original-title="Revolve"
       data-expanded-content=""
       data-html="true"
       data-expand-delay="2000"
       tooltip-dynamic-snippet-id=""
       class="tool is-activatable is-button"
       data-original-expanded-content="Create.......">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" class="os-svg-icon">
        <use xlink:href="#svg-icon-revolve-button"></use>
      </svg>
    </div>
    <span class="tool-label hide-in-toolbar"> Revolve </span>
  </div>`.replace(/>\s+</g, '');

for (const el of document.querySelectorAll('[command-id="extrude"]')) {
  el.replaceWith(...replacement.children);
}

You can even rewrite it so it applies seamlessly during page load by using MutationObserver in a content script that runs on document_start, example.

Make Chrome Extension to replace div with specific class

1 Answers1