css - 使用 Chrome 扩展更改网站的 CSS - 某些样式无法更改

Question

工作中。

我有一个可用的 Chrome 扩展程序，它将在我想要的网页上为我提供一个注入的样式表，但有些样式我似乎无法覆盖。

例如，查看当前的 Google 主页，我可以检查下面的空白区域，发现没有设置背景颜色。在样式部分，如果我单击“新建样式规则”按钮，（大加号）当我复制规则并将其添加到时，它会为我提供规则“.o3j99.qarstb”的正确（位置？）它工作的CSS文件。我将注入的样式表部分添加到样式中，并且颜色发生了变化。

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

我还可以将它添加到 CSS 并更改左上角的“关于”和“存储”文本大小。

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

我正在尝试做与另一个网页类似的事情，但它的 CSS 或样式更复杂，而且很难弄清楚注入的样式表是否会起作用。当我在现有规则中进行更改时，它们确实有效。

这是现有的样式规则：

.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;
}

这是 popup.js 文件。（将“allFrames：true”添加到 insertCSS 目标的末尾使其工作。）

$(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;">

这是一个安全的网站，所以我不能发布链接。这是表格的示例，我想扩大前两列。

这是检查页面的图片，显示了我可以手动更改但不能使用 CSS 文件更改的元素和两个规则。

“手写笔”扩展添加了什么并且有效。

标签： cssgoogle-chrome-extension