closures 相关问题

假设我正在编写一个书签脚本来修改网页。大多数网站（使用 webpack 等）都遵循这样的结构： <question vote="1"> <div> </div> <p>假设我正在编写一个书签脚本来修改网页。大多数网站（使用 webpack 等）都遵循这样的结构：</p> <pre><code><html> <script type="text/javascript"> const buttonClicked = (() => { let internal_variable = 0; const _internal_buttonClicked = () => { internal_variable++; document.getElementById("myButton").innerText = `Clicked ${internal_variable} times!`; }; return _internal_buttonClicked.bind(this); })(); </script> <body> <button id="myButton" onclick="buttonClicked()">Clicked 0 times!</button> </body> </html> </code></pre> <p>我想访问 <pre><code>internal_variable</code></pre> 并将其设置为 -100。使用调试器，这很简单；我在<pre><code>_internal_buttonClicked()</code></pre>里面断点，然后直接改<pre><code>internal_variable</code></pre>。</p> <p>我怎样才能做到这一点而不</p> <ul> <li>（手动）使用调试器</li> <li>拥有页面源的所有权（例如，我可以在本地对其进行修改，但我不能只发送拉取请求以将挂钩添加到脚本中）</li> <li>使其成为对 DOM 的纯粹视觉更改？</li> </ul> <p>我知道简单的答案是“你不能，故意”，但我愿意接受任何迂回的解决方案，涉及浏览器扩展/特权执行的解决方案，特定于<pre><code>require</code></pre>的解决方案等</p> <p>相关：</p> <ul> <li><a href="https://stackoverflow.com/questions/42602954/how-to-get-parameters-that-have-been-bound-by-javascripts-bind-function">如何获取JavaScript的.bind()函数绑定的参数</a></li> <li><a href="https://stackoverflow.com/questions/11192875/is-it-possible-to-gain-access-to-the-closure-of-a-function">是否可以访问函数的闭包？</a>（此处的最佳解决方案取决于成为第一个加载的脚本，这对于小书签来说通常是不可行的？有没有办法使页面重新加载并注入将脚本放入刷新页面的顶部？）</li> </ul> </question> <answer tick="false" vote="0"> <p>无法为 <pre><code>internal_variable</code></pre> 分配新值，因为它不在您的代码范围内。您也不能将新函数分配给 <pre><code>buttonClicked</code></pre>，因为它是一个常量。</p> <p>但根据实际情况，你可以采取其他一些方法。以下是一些适用于您的示例案例的内容：</p> <h2>1.覆盖<pre><code>innerText</code></pre></h2> <p>让它更改按钮上显示的数字，方法是始终从即将显示的值中减去 100。</p> <p>你的代码会有这样的：</p> <pre><code> Object.defineProperty(document.getElementById("myButton"), "innerText", { set(text) { // Subtract 100 from the number in the text "Clicked <number> times!" text = text.replace(/(Clicked )(\d+)( times!)/, (_, a, b, c) => a + (b - 100) + c); // Call the prototype setter for innerText Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerText").set.call(this, text); } }); </code></pre> <p>扁平化为小书签：</p> <pre><code>javascript: {Object.defineProperty(document.getElementById("myButton"),"innerText",{set(text) {text=text.replace(/(Clicked )(\d+)( times!)/,(_,a,b,c)=>a+(b-100)+c);Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerText").set.call(this, text);}});} </code></pre> <h2>2.创建一个新函数<pre><code>buttonClicked2</code></pre></h2> <p>它应该有对计数器进行修改的代码。然后将每次调用 <pre><code>buttonClicked</code></pre> 更改为 <pre><code>buttenClicked2</code></pre>。这里我假设就像示例中一样，此类引用仅存在于按钮的 <pre><code>onclick</code></pre> 属性中。此调用的位置越多，您可能需要复制为新函数的函数就越多，还需要重新连接对 <em>that</em> 函数的引用，...等。但这里只有 <pre><code>onclick</code></pre> 属性受到影响：</p> <pre><code> var buttonClicked2 = (() => { let internal_variable = -100; // Our update const _internal_buttonClicked = () => { internal_variable++; document.getElementById("myButton").innerText = `Clicked ${internal_variable} times!`; }; return _internal_buttonClicked.bind(this); })(); // Redirect the click document.getElementById("myButton").setAttribute("onclick", "buttonClicked2()"); </code></pre> <p>扁平化为小书签：</p> <pre><code>javascript: {var buttonClicked2=(()=>{let internal_variable=-100;const _internal_buttonClicked=()=>{internal_variable++;document.getElementById("myButton").innerText=`Clicked ${internal_variable} times!`;};return _internal_buttonClicked.bind(this);})();document.getElementById("myButton").setAttribute("onclick", "buttonClicked2()");} </code></pre> <h2>3.创建一个页面填充 <pre><code><iframe></code></pre></h2> <p>在其中 <pre><code><iframe></code></pre> 放置当前的 HTML，但修改您想要的代码。因此，页面将重新加载，但经过您的修改并显示为 <pre><code><iframe></code></pre>。</p> <pre><code>if (window === top) { // Patch the HTML let html = document.documentElement.innerHTML .replace("internal_variable = 0;", "internal_variable = -100;"); let iframe = `<body style="margin:0"><iframe style="display:block;border:0;height:100%;width:100%"></iframe></body>`; // Replace the current document with just an <iframe> document.write(iframe); // Write the patched HTML to the frame document document.querySelector("iframe").srcdoc = html; } </code></pre> <p>扁平化为小书签：</p> <pre><code>javascript: if(window===top){let html = document.documentElement.innerHTML.replace("internal_variable = 0;", "internal_variable = -100;");let iframe = `<body style="margin:0"><iframe style="display:block;border:0;height:100%;width:100%"></iframe></body>`;document.write(iframe);document.querySelector("iframe").srcdoc=html;} </code></pre> <h2>限制</h2> <p>上述每种解决方案都有其局限性。其中之一是否适合现实生活中的情况将在很大程度上取决于页面的功能。</p> </answer> </body></html>

javascript closures code-injection bookmarklet javascript-injection

回答 0 投票 0

closures 相关问题

最新问题