为什么我们需要在从 chrome 扩展注入脚本后删除脚本标签？

Question

Code based on this answer: https://stackoverflow.com/a/9517879/947111

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

After the script has been loaded, the script tag being removed. And indeed if we try to debug target web page, if we will remove this.remove() line, after script was inject there is following line:

In every example where I've found injected script is being removed, but my question is why it's necessary?

What I want to achieve is to check if this script already was injected and if not inject it. If remaining script tag is antipattern, how can I check that script already was injected?

Answer 1

Hope this can help you, basically, this code is permanently asking for some class or id in DOM, if that element is found you can inject the script into the page context.

this use a content script to access the page's context variables and functions:

 /**
 * loader.js
 * Injects necessary scripts into page context
 */

// Selector
const BTNPROCESSFILE = 'CB_594922000000710005';        

function injectScript(scriptPath) {
    let s = document.createElement('script');
    s.src = chrome.runtime.getURL(scriptPath);
    s.onload = function() {
        this.remove();
    };
    (document.head || document.documentElement).appendChild(s);
    
}

/**
 * This function checks if any element of the DOM is already rendered or loaded 
 * (You can choose any according to your DOM), 
 * for my case it is an ID called CB_594922000000710005
 */
async function searchElement() {
    do {
        await delayedLog()
        if (BTNPROCESSFILE) {
            //If the element was found then inject the script
            injectScript('src/content-script/injected.js');        
        }
    } while (!BTNPROCESSFILE)
}

function delay () {
    return new Promise(resolve => setTimeout(resolve, 100))
}
  
async function delayedLog () {
    // notice that we can await a function
    // that returns a promise
    await delay()

    btnFileProcess = document.getElementById(BTNPROCESSFILE)
}