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

Refreshing the page causes the Angular/Ionic Singleton instance to be destroyed

Encountered an issue with trying to access the 'map' property of an undefined value while using Express and VueJS

Guide to adding information to a file in Nodejs depending on a condition

Exploring the Node.js view object within a function and delving into the reasons why a property of

Steps for Creating an Animation Tool based on the Prototype:

The datepicker in Vuetify is failing to display any dates

TypeScript and Next.js failing to properly verify function parameters/arguments

The code functions perfectly in the Adobe Dreamweaver Preview, but unfortunately, it is not compatible with Chrome

Emphasizing the date variable within a spreadsheet

differences in opinion between JavaScript code and browser add-ons/extensions

What significance does it hold for Mocha's `before()` if the function passed requires parameters or not?

The JSON output is throwing an error because it is unable to access the property '0' since it is

Converting a variety of form fields containing dynamic values into floating point numbers

Using Vuetify to display text fields in a single row

The "angular2-image-upload" npm package encountering a CORS issue

Where did my HTML5 Canvas Text disappear to?

modifying the appearance of the play button through a JavaScript event without directly altering it

Development is hindered due to Cors policy restricting access to the localhost webapp

Issue encountered with AJAX request using JavaScript and Express

Creating numerous hash codes from a single data flow using Crypto in Node.js