Question

我的问题

当我尝试从Chrome地址栏搜索时，此问题经常出现（但不一致）。我的扩展有时无法成功注入我的自定义CSS。我记录了错误和tab对象以供检查，这是我得到的：

Error injecting CSS into tab (https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8)
Error message: No tab with id: 1202.
Tab: Object {
  active: false,
  height: 968,
  highlighted: false,
  id: 1202,
  incognito: false,
  index: -1,
  pinned: false,
  selected: false,
  status: "loading",
  title: "Google",
  url: "https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8",
  width: 1920,
  windowId: 1203,
}

错误消息声称“没有带标识的标签：（id）”，但标签对象我明显有该标识。

我正在做什么

首先，我的清单文件声明了一个内容脚本，我将其称为“content.js”，如下所示：

"content_scripts": [ {
  "all_frames": true,
  "js": [ "content.js" ],
  "matches": [ "<all_urls>" ],
  "match_about_blank": true,
  "run_at": "document_start"
} ],

在内容脚本中，我立即向后台脚本发送消息：

chrome.runtime.sendMessage({'init': true}, onExtensionMessage);

此后台脚本侦听“init”消息，然后执行以下函数，将sender.tab（其中sender是“init”消息的发送者）作为其参数传递：

function injectTabCSS(tab) {
  var url = tab.url;
  chrome.tabs.insertCSS(tab.id, {
    file: 'custom.css',
    allFrames: true,
    matchAboutBlank: true,
    runAt: 'document_start'
  }, function() {
    if (chrome.runtime.lastError) {
        console.log('Error injecting CSS into tab(', url,
                    ')\nError message: ',
                    chrome.runtime.lastError.message,
                    '\n', tab);
    }
  });
}

我的困惑

如果我（页面加载后）再次从内容脚本重新发送'init'消息，则成功插入CSS。这意味着问题是标签处于某种不幸的，部分活跃的状态。在我看来，如果选项卡已经注入了内容脚本并且能够将消息发送到后台页面，那么它应该能够注入CSS。这是一个错误，还是由于某种原因预期的行为？如何才能更可靠地完成这项工作？

Answer 1

Chrome预呈现多功能框搜索结果页面，因此当在"run_at": "document_start"注入内容脚本时，该选项卡仍然隐藏，其索引为-1（对于普通标签，它基于0）。尝试使用tabs.onReplaced事件侦听器来处理此类标签。

为什么我的扩展程序无法将CSS插入此选项卡？

我的问题

我正在做什么

我的困惑

1 个答案: