Prevent script Collision

[arcanisgk]

Is your feature request related to a problem? Please describe. Yes, I am developing an extension to be used on SE websites and I was thinking of using the existing methods, but there is a privacy policy problem. so the other way is to implement the following:

chrome.scripting.executeScript({
    target: { tabId: tabId, allFrames: true },
    files: ['src/js/stacks.min.js'],
});

the problem is that when it is executed overwrites some events: such as the filtering of posts.

Describe the solution you'd like I thought that Stack could offer some kind of implementation to support the extensions that implement it; or avoid the script collision with it, through some method like jquery does:

https://api.jquery.com/jquery.noconflict/

Describe alternatives you've considered I have no alternative; I have put everything documented in this post on the stack apps site but the solutions they have offered me have not worked.

https://stackapps.com/questions/9205/extension-access-to-layout-and-javascript-of-stackexchange-network-site-instead

Additional context I do not know if this topic has already been touched, or if there is a solution that I have not found yet.

in the structure of the extension this document.js that is supposed to be executed next to the user's active tab, well I have this:

let atsu_btn = `
                                    <button 
                                    type="button" 
                                    class="s-btn js-modal-open" 
                                    id="atsu-post-comment"
                                    data-togle="s-modal"
                                    data-target="#atsu-modal"
                                    style="margin-top:5px; border: 3px solid rgb(246, 178, 107); color: rgb(194, 123, 160); font-style: italic;">
                                    Auto Com. &amp; Help
                                    </button>
                    
                    
                                    <div data-controller="s-modal" data-s-modal-return-element="#atsu-post-comment">
                                        <aside class="s-modal" id="atsu-modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description" aria-hidden="true" data-controller="s-modal" data-s-modal-target="modal" data-s-modal-return-element=".js-modal-open[data-target='#atsu-modal']" data-s-modal-remove-when-hidden="false" data-joder="1">
                                            <div class="s-modal--dialog wmn8 hmn5" role="document">
                                                <h1 class="s-modal--header" id="modal-title">Selection and Configuration Automatic Comments.</h1>
                                                <div class="s-modal--body hs5" id="modal-description">

                                                    <nav>
                                                        <ul class="s-navigation" role="tablist" data-controller="s-navigation-tablist">
                                                            <li>
                                                                <button type="button"
                                                                        role="tab"
                                                                        id="tab-question"
                                                                        aria-selected="true"
                                                                        aria-controls="panel-question"
                                                                        class="s-navigation--item is-selected">Comments for Questions</button>
                                                            </li>
                                                            <li>
                                                                <button type="button"
                                                                        role="tab"
                                                                        id="tab-answers"
                                                                        aria-selected="false"
                                                                        aria-controls="panel-answers"
                                                                        tabindex="-1"
                                                                        class="s-navigation--item">Comments for Answers</button>
                                                            </li>
                                                            <li>
                                                                <button type="button"
                                                                        role="tab"
                                                                        id="tab-comment-setting"
                                                                        aria-selected="false"
                                                                        aria-controls="panel-comment-setting"
                                                                        tabindex="-1"
                                                                        class="s-navigation--item">Setting</button>
                                                            </li>
                                                        </ul>
                                                    </nav>
                                                    
                                                    <div id="panel-question" aria-labelledby="tab-question" class="d-flex hs5">
                                                        Comments for question.

                                                    </div>
                                                    
                                                    <div id="panel-answers" aria-labelledby="tab-answers" class="d-none d-flex hs5">
                                                        Comments for Answers
                                                    </div>
                                                    <div id="panel-comment-setting" aria-labelledby="tab-comment-setting" class="d-none d-flex hs5">

                                                        <div class="d-flex flex--item gs8 gsx as-end">
                                                            <button class="flex--item s-btn s-btn__primary" type="button">Save Setting ATSU</button>
                                                            <button class="flex--item s-btn" type="button" data-action="s-modal#hide">Cancel</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </aside>    
                                    </div>
                                    `;

when inserting it, the button does not work, although its attributes are adequate to open the mode, i implement:

document.querySelector("#atsu-post-comment").addEventListener("click", function (e) {
                    Stacks.showModal(document.querySelector("#atsu-modal"));
});

which returns the error:

to avoid this error then it was tried to implement:

let scriptInserted = document.createElement('script')
scriptInserted.innerHTML='Stacks.showModal(document.querySelector("#atsu-modal"))';
console.log(scriptInserted);
document.body.appendChild(scriptInserted);

Causing the following error:

To mitigate this last error, an attempt was made to implement chrome.scripting.executeScript but even though it works; this has collisions with its original version that comes on the page, to which there is no access due to security policies.