Category: JavaScript

To open a link in a new tab with JavaScript in a Chrome extension, we call the chrome.tabs.create method.

For instance, we write

{
  //...
  "background": {
    "scripts": ["background.js"]
  }
  //...
}

in manifest.json to add the background.js script as a background script.

Then we write

chrome.browserAction.onClicked.addListener((activeTab) => {
  const url = "http://example.com/";
  chrome.tabs.create({ url });
});

in background.js to add a click listener for our Chrome extension with onClicked.addListener.

In the listener, we call chrome.tabs.create with { url } to open a new tab that goes to the url.

To avoid decimal values in a number input with JavaScript, we use parseInt to convert the value to an integer.

For instance, we write

<input
  type="number"
  oninput="this.value = (parseInt(this.value) || 0)"
  placeholder="0-9"
  autofocus=""
  value="0"
/>

to add a number input with the oninput attribute set to this.value = (parseInt(this.value) || 0).

The code is run as we type.

And it calls parseInt to parse the input value into an integer.

We then assign that as the new input value.

To replace CSS files on the fly with JavaScript, we can create a new link element.

For instance, we write

function changeCSS(cssFile, cssLinkIndex) {
  const oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
  const newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", cssFile);

  document
    .getElementsByTagName("head")
    .item(cssLinkIndex)
    .replaceChild(newlink, oldlink);
}

to add the changeCSS function.

In it, we get the link element and get the link element to replace with the item meethod and the cssLinkIndex index.

Then we create a new link element with createElement.

We add the attributes for the new element with setAttribute.

And then we get the head element with getElementsByTagName and item.

We then call replaceChild to replace the oldLink element with the newLink link element.

To add an SVG element to an existing SVG using DOM with JavaScript, we use the createElementNS method.

For instance, we write

const [svg] = document.getElementsByTagName("svg");
const newElement = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "path"
);
newElement.setAttribute("d", "M 0 0 L 10 10");
newElement.style.stroke = "#000";
newElement.style.strokeWidth = "5px";
svg.appendChild(newElement);

to get the svg element with getElementsByTagName.

And then we call createElementNS to create a path element in the "http://www.w3.org/2000/svg" namespace.

Next, we add the d attribute to the path element with setAttribute.

And then we set the stroke and strokeWidth styles on the path element.

Finally, we call svg.appendChild to append newElement to the svg element.

To detect when CSS property changed using JavaScript, we listen for the DOMAttrModified event.

For instance, we write

document.documentElement.addEventListener(
  "DOMAttrModified",
  (e) => {
    if (e.attrName === "style") {
      console.log(e.prevValue, e.newValue);
    }
  },
  false
);

document.documentElement.style.display = "block";

to listen for the DOMAttrModified event on the body element with document.documentElement.addEventListener.

Then we check if the style attribute is changed with e.attrName in the event listener.

We get the previous value of it with e.prevValue and the latest value with e.newValue.

Then when we change the style property, the event will be triggered.

To bind dynamic data to aria-label with Angular, we use square brackets.

For instance, we write

<div [attr.aria-label]="productDetails?.productName"></div>

to bind the aria-label attribnute to the value of the productDetails?.productName property.

To get the HTML for a DOM element in JavaScript, we use the outerHTML property.

For instance, we write

const el = document.getElementById("foo");
console.log(el.outerHTML);

to get the element with getElementById.

And then we get the code for the element with the outerHTML property.

To fix blurry text in an HTML5 canvas with JavaScript, we set the canvas width and height to the parent’s width and height.

For instance, we write

const canvas = document.getElementById("canvas");
canvas.width = canvas.getBoundingClientRect().width;
canvas.height = canvas.getBoundingClientRect().height;

to get the canvas with getElementById.

Then we call getBoundingClientRect to get an object with the parent’s width and height.

And we set the width and height as the values of the canvas’ width and height to fix blurry text in the canvas.

To get the first and last elements with JavaScript querySelector, we use the first-child and last-child selectors.

For instance, we write

const first = div.querySelector("[move_id]:first-child");
const last = div.querySelector("[move_id]:last-child");

to call querySelector with a select with first-child at the end to select the first element with attribyute move_id.

And we call querySelector with a select with last-child at the end to select the first element with attribyute move_id.