Barebone Chrome addon

[Costas]

A boilerplate Chrome addon consists by
<code>-manifest.json - define properties
-you_name_it.js
or/and
you_name_it.css</code>

---

the manifest.json

{
  "manifest_version": 2,
  "name": "xxx helper",
  "version": "1.0.0",

  "description": "Minimal and friendly parsing",
  "short_name": "Productive xxxx",

  "content_scripts": [
    {
      "matches": ["https://www.xxx.com/*", "https://www.xxx.ca/*"],
      "run_at": "document_start",
      "js": ["override.js"]
    }
  ]
}

the run_at property is not a requirement. We add it, to attach event before DOM has fully loaded.

The run_at > document_start by definition :

Scripts are injected after any files from css, but before any other DOM is constructed or any other script is run.

so, we writing our script to override.js. There is the window.load event and the document.DOMContentLoaded event.

window.addEventListener('load', (event) => {
    alert("load");
});

document.addEventListener('DOMContentLoaded', (event) => {
    alert("DOMContentLoaded");
});

document.addEventListener('readystatechange', (event) => {
	alert(event.target.readyState);
});

The window.load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

The document.DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

The document.readyState property describes the loading state of the document. When the value of this property changes, a readystatechange event fires on the document object. The possible status are :
<div style="margin-left:30px">
loading - The document is still loading.
interactive - The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
complete - The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.
</div>
 
to summarize, this is what happening when a page is loaded :
<div style="margin-left:30px">
readystate: interactive
DOMContentLoaded EVENT
readystate: complete
load EVENT
</div>
 
The proper, is when listening for DOMContentLoaded or window.load, you should check document.readyState first

// src - https://stackoverflow.com/a/43245774 by Makyen

//DOMContentLoaded
if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded',afterDOMLoaded);
} else {
    afterDOMLoaded();
}

function afterDOMLoaded(){
    //Everything that needs to happen after the DOM has initially loaded.
}

//load
if(document.readyState !== 'complete') {
    window.addEventListener('load',afterWindowLoaded);
} else {
    afterWindowLoaded();
}

function afterWindowLoaded(){
    //Everything that needs to happen after the window is fully loaded.
}

//or Tobias anonymous function -- src - https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript
var ready = (callback) => {
  if (document.readyState != 'loading') callback();
  else document.addEventListener('DOMContentLoaded', callback);
}

ready(() => { 
  /* Do things after DOM has fully loaded */ 
});

---

overall, lets write script to override.js and wait 3 seconds after the window.load event is fired. Most times needed, as we waiting the target website to complete any ajax / websocket request.

var ready = (callback) => {
	if (document.readyState != 'complete') callback();
	else document.addEventListener('load', callback);
}

ready(() => { 
	//so here all loaded, set an interval as we waiting for the target website, ajax call to completed
	setInterval(tickTock, 1000 * 3); //in milliseconds
});

function tickTock(){
	var divs = document.querySelectorAll('.table');
	console.log(divs);
}

---

Deleting DOM elements before the Page is displayed to the screen

//src - https://stackoverflow.com/a/32537455 by wOxxOm
//manifest.json
{
  "name": "Delete elements",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["http://somesite.com/*"],
      "run_at": "document_start",
      "all_frames": true,
      "js": ["content.js"]
    }
  ],
  "manifest_version": 2
}

//content.js
const DEL_SELECTOR = '.header-nav-item, #topchapter, #wrapper_header';

const mo = new MutationObserver(onMutation);
// in case the content script was injected after the page is partially loaded
onMutation([{addedNodes: [document.documentElement]}]);
observe();

function onMutation(mutations) {
  const toRemove = [];
  for (const {addedNodes} of mutations) {
    for (const n of addedNodes) {
      if (n.tagName) {
        if (n.matches(DEL_SELECTOR)) {
          toRemove.push(n);
        } else if (n.firstElementChild && n.querySelector(DEL_SELECTOR)) {
          toRemove.push(...n.querySelectorAll(DEL_SELECTOR));
        }
      }
    }
  }
  if (toRemove.length) {
    mo.disconnect();
    for (const el of toRemove) el.remove();
    observe();
  }
}

function observe() {
//has also OldValue! - https://developer.mozilla.org/en-us/docs/Web/API/MutationObserver/observe
  mo.observe(document, {
    subtree: true,
    childList: true,
    characterData: true
  });
}

ref - Detecting DOM changes with javascript using MutationObserver

---

Chrome - Content scripts
Manage events with background scripts
List of everything a Chrome Extension can do (2016)
PerimeterX - All events that exists in the browser

Example of light CSS adjustment - https://github.com/lf94/facebook-messenger-normalize

---

element.closest()
Method traverses the Element and its parents (heading toward the document root).

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

//src - https://stackoverflow.com/a/49516201 by simbro
var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// returns the closest ancestor which is a div in div, here is div-03 itself

var r3 = el.closest("article > div");  
// returns the closest ancestor which is a div and has a parent article, here is div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article

---

Check if jQuery loaded + misc

if (typeof jQuery == 'undefined') {
    // jQuery IS NOT loaded, do stuff here.
}

//
document.getElementsByTagName("head")

document.getElementsByTagName("script")

//
remove()      // https://www.w3schools.com/jsref/met_element_remove.asp
removeChild() // https://www.w3schools.com/jsref/met_node_removechild.asp