javascript - 如何检查选项卡加载失败

标签 javascript google-chrome google-chrome-extension browser-tab

我需要在更新的选项卡上做一些事情,比如检查页面加载是否正确,并替换页面内的内容。这是我的代码

// background.js

chrome.tabs.onUpdate.addListener(function(tabId, changeInfo, tab){
    try{
       chrome.tabs.executeScript(tabId, filename);
    } catch(e) {
       // 1. when I open a new tab
       // 1. Error during tabs.executeScript: Unknown error.
       // 2. when I request a url not arrive-able.
       // 2. Error during tabs.executeScript: Cannot access contents of url 
       //    "data:text/html,chromewebdata". Extension manifest must request 
       //    permission to access this host.

       // but I can't catch these errors, they just appers in background console.  
    }
});

我尝试在上传时执行脚本,但如果当前选项卡是 chrome://newtab 或 chrome 错误页面,我无法执行此操作,但我无法捕获错误。

最佳答案

没有直接的方法来捕获这些错误。但是,我刚刚创建了一种方法来实现目标:

  • 使用chrome.tabs.onUpdated (带有 d!)。
    此事件会触发两次,一次是页面初始化(“loading”),一次是 DOM 加载完毕(“complete”)。
  • 使用chrome.tabs.executeScript(tabId, {file: fileName}, fn_callback);
    第二个参数必须是一个对象,包含 "file""code"。第三个参数,一个函数,总是在完成脚本注入(inject)后执行。

    现在,真正的实现:
    1. 执行内容脚本(使用 chrome.tabs.executeScript )。
    2. 在注入(inject)的内容脚本中,定义一个 onMessage 事件。
    3. chrome.tabs.executeScript的回调函数中,按照以下步骤操作:
    4. 使用var exec_error = setTimeout(onError, 100);推迟 onError 方法的执行。选择适当的小延迟 (100),并将对此超时的引用保存在变量 exec_error 中。
    5. 使用chrome.tabs.sendMessage(tabId, func)向选项卡发送消息。
    6. 在回调函数 func 中,添加以下逻辑:
    7. 发生错误时,不会注入(inject)2. 中定义的onMessage 事件。因此,选项卡不会按预期响应,并且超时不会被清除。 因此,onError 将被执行
      否则,清除超时,并执行 onSuccess

代码(例如 background 脚本):

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    // This event fires twice: loading, and complete.
    // If we're loading, terminate function, and wait for "complete"
    if (changeInfo.status === 'loading') return;

    // On error and on success, this happens:
    function onError() {
        console.log('Error injecting the content script!');
    }
    function onSuccess() {
        console.log('Successfully injected content script!');
    }

    // Execute scripts
    chrome.tabs.executeScript(tabId, {
        file: 'test_access.js'
    }, function() {
        // This function always fires *after* the attempt to run the code
        var exec_error = setTimeout(onError, 100);
        chrome.tabs.sendMessage(tabId, 'Are you there?', function(yes_no) {
            if (yes_no === 'Yes') {
                clearTimeout(exec_error);
                onSuccess();
            }
        });
    });
});

test_access.js

chrome.extension.onMessage.addListener(function(req, sender, respond) {
   if (req === 'Are you there?') {
       respond('Yes');
   }
});
// Rest of your content script's logic, eg:
alert(location.href);

关于javascript - 如何检查选项卡加载失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10221359/

相关文章:

javascript - 如何将事件传递给 setState 回调函数?

html - Firefox 中的 CSS 渲染问题

javascript - 让 Promise 等待 Chrome.runtime.sendMessage

javascript - 如何制作类似于广告拦截器的徽章计数器?

javascript - 使用 javascript 调用带有 javascript 的链接的 HREF 属性!

javascript - 用于信息图表的世界地图 API

javascript - Jquery + GSAP 从 onComplete 函数访问本地计算的值

javascript - 控制台中 Jquery 的 Google Chrome 开发者工具问题

angularjs - 输入元素上不存在值属性 | AngularJS、Chrome 91、 Protractor

google-chrome - 开发模式下的恒定 Chrome 扩展 ID