Trick to bypass inline script restrictions on Chrome extension

Question

Trick to bypass inline script restrictions on Chrome extension

I have developed a Chrome extension with a feature that involves looping a list of links into a .div element. Here is the code snippet:

function updateIcd() {

modalIcdLinks.innerHTML = '';
let icdLinks = '';

for (let i = 0; i < icdCodes.length; i++) {

    icdLinks += '<a href="#" onclick="removeIcd('+i+')">'+ icdCodes[i] +' [x]</a><br />'

}

modalIcdLinks.innerHTML = icdLinks;
}

When one of these links is clicked, it should pass the parameter to the removeIcd function in order to remove it from the array.

The issue I am facing is that Chrome extensions do not support inline scripting for security reasons. This means I need to find an alternative way to pass the value (like the array index) to my JavaScript function when a link is clicked without using inline scripting. Any suggestions on how to achieve this?

javascript google-chrome-extension

Answer 1

Answer №1

Implement direct DOM manipulation and create a JavaScript function for handling onclick events:

function updateIcd() {
  const container = document.createDocumentFragment();
  icdCodes.forEach((code, index) => {
    container.appendChild(
      create('a', {
        href: '#',
        onclick: () => removeIcd(index),
        textContent: code + ' [x]',
      }));
    container.appendChild(create('br'));
  });
  modalIcdLinks.textContent = '';
  modalIcdLinks.appendChild(container);
}

function create(element, props) {
  return Object.assign(document.createElement(element), props);
}

The names of DOM properties like textContent or onclick are case-sensitive. They resemble HTML attributes but may contain uppercase letters. To confirm the correct spelling, you can type something like document.body. in the devtools console (remember the dot at the end), use the auto-complete shortcut (Ctrl-Space), type a few characters to see matching properties.

Answer 2

Implement direct DOM manipulation and create a JavaScript function for handling onclick events:

function updateIcd() {
  const container = document.createDocumentFragment();
  icdCodes.forEach((code, index) => {
    container.appendChild(
      create('a', {
        href: '#',
        onclick: () => removeIcd(index),
        textContent: code + ' [x]',
      }));
    container.appendChild(create('br'));
  });
  modalIcdLinks.textContent = '';
  modalIcdLinks.appendChild(container);
}

function create(element, props) {
  return Object.assign(document.createElement(element), props);
}

The names of DOM properties like textContent or onclick are case-sensitive. They resemble HTML attributes but may contain uppercase letters. To confirm the correct spelling, you can type something like document.body. in the devtools console (remember the dot at the end), use the auto-complete shortcut (Ctrl-Space), type a few characters to see matching properties.

Trick to bypass inline script restrictions on Chrome extension

Answer №1

Similar questions

Use jQuery to dynamically update a text field within a table row based on a selection from

What is the best way to store textarea information into a session using the jQuery AJAX post method in Codeigniter?

Extracting a variable established on the client side and passing it to a server-side node backend

How can one determine the most accurate box-shadow values?

Having trouble accessing properties that are undefined while using react JS, specifically when trying to read a 'map' property

What is the best way to incorporate Tradingview's JavaScript into the render function of a React Typescript

Creating PHP functions that return a JSON string when invoked - a simple guide

Is it possible to load babel-polyfill using <script async> tag?

Create a JavaScript button that redirects to a different page within a React application

Defeat the all-powerful !important tag and enable dialog customization for positioning

Definition of union types in JavaScript using Typescript

What is the best way to incorporate several functions within a resize function?

Retrieving subscriber count from Feedburner using jQuery and JSON

It appears that using "object[prop]" as a name attribute does not function properly in HTML

Determining whether an element possesses an attribute labeled "name" that commences with a specific term, apart from the attribute "value"

Finding mongoose in an array of objects nested within another object

How to display and download a PDF file on a JSP web page

Securing URL Query Parameters

Clicking on the checkbox will trigger an AJAX request to cache the

How can Selenium be used to identify an Internet Explorer browser extension?