I am new to javascript and Tampermonkey. I wanted to add a frame to the Memrise's website. The code is as follows:

// ==UserScript==
// @name         Merise
// @namespace    /
// @version      0.1
// @description  try to take over the world!
// @author       k1
// @match        /*
// @icon         
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var word = document.getElementsByClassName("sc-1nck79x-5 jPETsr")[0]
    var bdy = document.getElementsByClassName("sc-r1ec2z-1 evBYsl")[0]
    var defl = "/" + word.innerHTML
    var fr = document.createElement("IFRAME");
    fr.height = "500px"
    fr.src = defl
    fr.style.maxWidth="90%"
    bdy.appendChild(fr);
})();

I am new to javascript and Tampermonkey. I wanted to add a frame to the Memrise's website. The code is as follows:

// ==UserScript==
// @name         Merise
// @namespace    http://tampermonkey/
// @version      0.1
// @description  try to take over the world!
// @author       k1
// @match        https://app.memrise./aprender/*
// @icon         https://www.google./s2/favicons?domain=memrise.
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var word = document.getElementsByClassName("sc-1nck79x-5 jPETsr")[0]
    var bdy = document.getElementsByClassName("sc-r1ec2z-1 evBYsl")[0]
    var defl = "https://learnersdictionary./definition/" + word.innerHTML
    var fr = document.createElement("IFRAME");
    fr.height = "500px"
    fr.src = defl
    fr.style.maxWidth="90%"
    bdy.appendChild(fr);
})();

But the code execution blocked due to the error: Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src").

Please let me know how can I fix this if there is any way to do that. Thanks.

• javascript
• content-security-policy
• tampermonkey

• 1 try to do research on the question you are asking and show this reasearch on the question. keep up the good work! – a1cd Commented Oct 31, 2021 at 14:58

1 Answer 1

Use GM_addElement to circumvent such CSP restrictions:

// ==UserScript==
// @name         Merise
// @match        https://app.memrise./aprender/*
// @grant        GM_addElement
// ==/UserScript==

var word = document.getElementsByClassName('sc-1nck79x-5 jPETsr')[0].textContent;
var bdy = document.getElementsByClassName('sc-r1ec2z-1 evBYsl')[0];
GM_addElement(bdy, 'iframe', {
  src: 'https://learnersdictionary./definition/' + encodeURIComponent(word),
  style: 'width: 90%; height: 500px;',
});