Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Prevent script Collision

Aperta
#780 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
javascript, typescript
Ambito
frontend

Direzione di ricerca

Inizia esaminando l’uso segnalato di chrome.scripting.executeScript e le chiamate a Stacks.showModal nell’issue, insieme alla discussione di Stack Apps collegata. Determina se il comportamento richiesto di isolamento degli script o di prevenzione delle collisioni è realizzabile all’interno di Stacks; per considerarlo completato sono necessari un ambito concordato e un approccio documentato e funzionante che non interrompa il comportamento esistente della pagina.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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:

image

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:

image

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.

Lingua principale
TypeScript
Stelle
672
Fork
107
Merge medio
2g 12h
PR unite (30g)
26

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di StackExchange/Stacks

Tutte le issue di StackExchange/Stacks

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.