相关疑难解决方法(0)

有一个谷歌Chrome扩展用content script,处理发生在所有选项卡页面JS错误.但问题是没有一种常见的获取错误堆栈跟踪的方法不起作用.

例如,content scriptChrome扩展程序中有一段代码:

window.addEventListener('error', function(event) {
    console.log(event.error.stack); // event.error will be null
}, false);

如果我在网页中调用此代码,那么event.error将包含Error具有stack属性的对象.

使用以下方法尝试获取堆栈跟踪的问题相同:

console.log((new Error()).stack));

有没有人知道一些工作问题,以获得content scriptChrome扩展内的错误堆栈跟踪？

错误堆栈跟踪必须作为string或接收Array,并不意味着通过调用JS控制台中的某些输出console.trace().

如何重现:

1. 下载https://mega.co.nz/#!ENw00YAC!92gBZEoLCO9jPsWyKht4dbjYyo0Zk-PU5YAj0h88-3Q
2. 解压缩jzen.zip到某个/jsen文件夹
3. chrome://extensions在您的Google Chrome中打开,启用Developer mode http://i.imgur.com/5x5D6NP.png
4. 单击Load unpacked extension按钮并选择/jsen文件夹的路径
5. 打开/jsen/content.js文件并添加console.log('JSEN', e.error.stack);到里面window.addEventListener('error', function(e) {
6. 转到http://xpart.ru/_share/js.htm并在JS控制台中查看结果(Ctrl + Shift + J) …

简洁版本

当我无法访问原始源代码时，如何使用用户脚本（例如 Tampermonkey 注入的代码）修改 React 组件而不破坏应用程序？

加长版

直接修改 React 组件的 DOM 可能会破坏应用程序，因为协调算法可能会因手动 DOM 更改而感到困惑。因此，我想修改我的用户脚本中的 React 组件，以便 React 可以不受阻碍地继续渲染。

在一个简单的设置中，React 会发现全局命名空间中的组件，我们可以轻松修改组件（请参阅此小提琴以获取工作示例）：

oldComponent = Component
function Component(props) {
  // modify the props to change the appearance of the component
  return oldComponent(modifiedProps);
}

然而，部署应用程序时情况会更加复杂，因为组件通常使用webpack进行捆绑。我如何能够在组件已捆绑的应用程序中重现上面的示例？

我正在开发一个 Google Chrome 扩展程序，并且有类似下面的代码。虽然下面的代码没有任何问题，但有一个小问题我无法解决。

我使用此代码来检测类是否因reports-content失去输入控件的焦点而发生更改，或者计时器是否是导致更改的操作。

问题是，如果更改是由于失去对输入控件而不是计时器的关注而导致的，我只想做一些事情。

我想这样做，这样我就可以循环不同的输入，并且只有在“报告内容”更新为新数据后才尝试新的输入。

“计时器”不在我的控制范围内，因为它位于第三方网站 (tradingview.com) 上，该网站恰好使用React 框架，以防万一这一点很重要。每次价格变化时，它都会检测到我正在检查的对象的突变，这不是一个错误，这样做很好，但我需要能够辨别由此引起的突变（计时器/event/change)，并且来自输入控件失去焦点。

下面是我当前看到的两个突变记录的示例，一个由事件引起，另一个由计时器或（价格变化注意到事件）引起。

下面是报告内容的示例。

//When the DOM is ready set the mutation listner.
$(document).ready(function(){
    console.log("JQuery Ready");

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(record => {
            var recordTarget = record.target;
            
            if(record.addedNodes.length>0){
                if(recordTarget.classList.contains("reports-content")){
                    console.log(recordTarget);
                    console.log(record);
                };
            }
                    
        });
    });

    //Use mutation observer on 'body' to wait for the existence of the .reports-content class node
    var target = $('body')[0];
    var config = {
        childList:true,
        subtree: true
    }; …

我正在开发一个针对Firefox,Safari,Chrome的浏览器插件,它将拦截页面上的数据,针对正则表达式运行它,然后如果它匹配 - 重新格式化它.我有这个工作在页面加载使用:

var meth = {
  replaceInElement : function(element, find, replace) {
        // iterate over child nodes and replace
  },
  run : function(evt){
    // doc is the document that triggered "run" event
    if (!(evt.target.nodeName === "#document")) { return; }
    var doc = evt.target; // document that triggered "onload" event
    if (!(doc instanceof HTMLDocument)) { return; }
    if (!doc.location) { return; }

    // perform substitutions on the loaded document
    var find = /regex/gi

    meth.replaceInElement(doc.body, find, function(match) {
        var new_content;
        //do …

我创建了一个Chrome扩展程序,它只使用热键[Alt] + [0 ... 9]来发现facebook使用相同的热键.有没有可能我的扩展可能会禁用Facebook的热键,以便单独开火？我很确定我已经确定了facebook用于实现[Alt] + [0 ... 9]个热键的代码:

document.documentElement.onkeydown=function(a){a=a||window.event;var b=a.target||a.srcElement;var c=a.keyCode==13&&!a.altKey&&!a.ctrlKey&&!a.metaKey&&!a.shiftKey&&CSS.hasClass...

这是在从根文档的头部调用的脚本中.我已尝试以下方法禁用它们:

//contents script:
$().ready( function() {
  document.documentElement.onkeydown = '';
});

乃至

$().ready( function() {
  document.documentElement.onkeydown = function(e){};
});

我进一步猜测这些尝试都不起作用的原因是因为虽然Chrome扩展内容脚本与运行它们的任何网页共享一个DOM,但它们可能不共享编码环境？任何见解将不胜感激!

我有一个带有popup.html和注入内容脚本的chrome扩展.使用注入的内容脚本我试图访问youtube的javascript API函数,除了一个:addEventListener之外它一切正常.

Youtube的javascript API的事件监听器监听要更改的视频的状态.因此,如果到达视频结尾,则状态变为0.

var currentVideo = document.getElementById('movie_player');
currentVideo.addEventListener("onStateChange", "onytplayerStateChange");

function onytplayerStateChange() {
   console.log("The state of the player has changed");
}

这段代码在正常环境中工作正常,但它无法在内容脚本中工作.为什么我不能在内容脚本中捕获更改事件？有任何想法吗？

我有基于内容脚本的Chrome扩展程序.我通过内容脚本中的弹出窗口启动登录过程.

我使用下面的代码打开一个弹出窗口,然后等到它关闭.

但是,我从window.open方法中获得了"未定义" .有人知道为什么会这样吗？

loginwin是undefined在下面的代码虽然弹出窗口打开了罚款规定login_url.下面的代码是从我的内容脚本中调用的.

var loginWin = window.open(login_url, 'LoginWindow', "width=655,height=490");
console.log(loginWin);
// Check every 100 ms if the popup is closed.
var finishedInterval = setInterval(function() {
    console.log('checking if loginWin closed');
    if (loginWin.closed) {
        clearInterval(finishedInterval);
        console.log('popup is now closed');
        Backbone.history.navigate('index', true);
    }
}, 1000);

我试图使用简单的chrome扩展名重载navigator.userAgent.由于内容脚本在隔离的env中运行,我尝试创建一个脚本元素并将逻辑写入此脚本.这发生在扩展的后台页面

chrome.tabs.query({
  active:!0
}, function(tabs) {
    var x = "window.navigator.__defineGetter__('userAgent', function() {" +
            "return 'Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D)" +
            " AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile " + 
            "Safari/535.19'; });console.log(navigator.userAgent);";

    for (var i = 0;i < tabs.length;i++) {
      var code = 'var s = document.createElement("script"); s.text = "' + x +
                 '"; document.head.insertBefore(s, document.head.firstChild);' + 
                 'navigator.userAgent ="s"; console.log(navigator.userAgent);';

      // Inject into the tabs of choice - currently everything.
      chrome.tabs.executeScript(tabs[i].id, {
        code: code
      });
    }
  });

脚本附加了head元素,我可以看到UA字符串是通过在chrome的控制台中尝试navigator.userAgent而被欺骗的字符串,因此我相信导航器对象已经过载. …

我是Chrome扩展程序的新手,想了解所有类型的脚本/页面是如何工作的.

这是我的理解:

首先 - 有"内容脚本",应该用于实际修改页面.

第二 - 有一个"后台脚本",设计用作发送和接收消息的服务器,但它不会修改页面的DOM; 因此它可以执行诸如处理存储和脚本之间的通信但不修改页面之类的任务.

最后 - 有"弹出脚本",它们与内容脚本和后台脚本分开,但您仍然可以在它们之间发送/接收消息.
弹出脚本不能直接修改页面(与后台脚本相同),它们只能向其他两个发送消息.
你根本不在清单文件中声明它们,你可以直接在弹出的html文件中使用它们.

最后,只有内容脚本最终才能真正修改页面.

我对么？

我刚看到这个链接,关于如何在Chrome开发工具上检查"Canvas框架",但是如何在Chrome扩展程序上进行检查？

我认为chrome.debugger.sendCommand应该在这里使用该方法.

如何在Chrome扩展程序上执行此操作？

编辑:我通常想要使用Chrome的调试器或类似方法检查这些数据,而无需与JavaScript的代码交互.