Chrome扩展注入样式表修改网站CSS时部分样式无法覆盖问题咨询

目前已调试运行正常，相关情况如下。

我开发了一款可向目标网页注入样式表的Chrome扩展，存在部分样式始终无法覆盖的问题。

• 在谷歌首页测试时，检查页面下方空白区域未设置背景色，在样式面板点击「新建样式规则」按钮获取选择器.o3j99.qarstb，添加到CSS文件后正常生效，背景色成功修改，对应规则如下：

.o3j99.qarstb {
    background-color: aqua;
}

• 添加以下CSS规则也可正常修改左上角「About」和「Store」的文字大小：

body, input, button {
    font-size: 27px !important;
}

复杂站点样式失效问题 #

对结构更复杂的站点执行相同操作时，注入样式表未生效，但直接修改页面原有规则可以生效。
站点原有样式规则如下：

.quixote .qx-grid .editor_grid tbody .input-group input {
    width: 100% !important;
}

我将修改后的规则添加到styles.css文件中后被忽略，样式面板中找不到对应的注入样式表：

.quixote .qx-grid .editor_grid tbody .input-group input {
    width: 900px !important;
}

问题解决方法 #

排查扩展代码后，在chrome.scripting.insertCSS的target参数末尾添加allFrames: true后问题解决。

调整后的popup.js代码 #

$(document).ready(function() {
$('.reset').click(function() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
/*alert("Button Reset");*/
        chrome.scripting.removeCSS({
            target: { tabId: activeTab.id },
            files: ["styles.css"]
});
/*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "reset"});*/
});
})

$('.format').click(function() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
/*alert("Button Wider");*/
        chrome.scripting.insertCSS({
            target: { tabId: activeTab.id, allFrames: true },
            files: ["styles.css"]
        });
/*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "wider"});*/
});
/*alert("Hello");*/
})
})

补充说明 #

扩展原有content.js代码如下，实测将其内容全部注释后，popup.js中的代码仍可正常运行，该文件未在本次功能中起到实际作用：

/*var copy = $('body').clone()

chrome.runtime.onMessage.addListener(function(request, sender,     sendResponse) {
if( request.buttonclicked === "reset" ) {
    $('body').html($(copy))
    }
if( request.buttonclicked === "wider" ) {
        chrome.scripting.insertCSS({
            target: { tabId: tabId },
            files: ["styles.css"]
        });
    }
})*/

本次调整对应的目标元素代码如下：

<input class="form-control required" type="text" name="_obj__TIMESHEETITEMS_0_-_obj__PROJECTID" id="_obj__TIMESHEETITEMS_0_-_obj__PROJECTID" autocomplete="off" size="28" placeholder="Project" tabindex="0" style="min-width: 110px;">

本次需求为加宽该保密站点页面表格的前两列，调试过程相关截图如下：

• 页面表格示例：
• 元素检查页截图（展示手动修改可生效但注入不生效的规则）：
• Stylus扩展可正常生效的规则截图：

内容的提问来源于stack exchange，提问作者Tanquen