Chrome 扩展 - 更改 styles.CSS var 不工作

Question

抱歉，我搞砸了。我没有更新上一个 post 的清单，我忘记了 content.js，这就是 Change 按钮发送值以及页面从中输入的值获取新样式属性值的方式文本字段，然后到 content.js，下面添加了现有的 content.js 文件。

我有一个 styles.css 可以更改网页并从弹出窗口加载，但想根据在弹出窗口输入的数据更改 styles.css 中的变量。

我已经添加了一个 content.js 文件，我现在可以从 Popup 传递一个值，它向页面添加了一个新的样式属性，但它没有更新 [=] 中的 --ptwidth 74=] 文件。我想我需要把它放在 styles.css 中以提供正确的位置并添加 !important 选项。

我试着问这个问题之前 closed\linked 一个关于网页 DOM 的问题并且没有 post 评论的声誉并且不确定我应该在那里问我的问题如果我可以：

How to access the webpage DOM rather than the extension page DOM?

styles.css 注入使用 Wider 按钮工作，--ptwidth var 被传递给 styles.CSS 中给定的值 (310)，至少我想能够在文本框中输入一个新值，然后使用现有的 Wider 按钮加载更新后的内容 styles.css，但最好让它自动更新，甚至可以使用滑块。

更改按钮将在文本字段中输入的新值移动到 content.js 文件，然后添加新的样式属性，但它不起作用。 Wider 按钮上的 insertCSS 有效，但它添加的信息不同。

Content.js 添加样式属性部分，insertCSS 添加有效的 :root 部分。

添加者Content.js 无作品：

由 insertCSS 添加并添加以下两个：

之前的列：

之后的列：

使用带 insertCSS 的 Wider 按钮之前的规则：

styles.css 的 insertCSS 注入后的规则：

弹出窗口：

清单：

{
  "manifest_version": 3,
  "name": "Hellper",
  "description": "Extension",
  "version": "0.1",

  "icons": { "16": "logo_16_T.png",
             "48": "logo_48_T.png",
            "128": "logo_128_T.png" 
           },

  "action": {
    "default_icon": "logo_16_T.png",
    "default_popup":"popup.html"
            },

  "permissions": ["scripting", "tabs", "activeTab", "content.js"],
  "host_permissions": ["<all_urls>"],
  
  "content_scripts": [{
    "js": ["jquery-2.2.0.min.js", "popup.js"],
    "matches": ["https://www.google.com/*",
                "https://en.wikipedia.org/*",
                "https://whosebug.com/*"]
  }]
}

popup.html:

<!doctype html>
<html>
  <head>
    <title>Popup</title>
  </head>
  <body>
    <input id="button1" type=button value=clickme>
    <button class="format">Wider</button>
    <button class="reset">Reset</button>
        <script src="jquery-2.2.0.min.js"></script>
        <script src="popup.js"></script>
      <!--
        <h2>Background Color</h2>
      <input type="color" id="color-changer" />
      <h2>Rotate Page</h2>
      <input type="range" min="0" max="360" step="1" value="0" id="rotate" />
      -->
    <h1>New Width</h1>
    <p>
      <input type="text" id="newWidth" value="120"/>
      <input type="submit" id="btnChange" value="Change"/>
    </p>
  <div class="form-group">
    <lable for="slider">Project/Task Width</lable>
    <input type="range" min="0" max="999" step="1" value="160" id="slider" />
  </div>
  </body>
</html>

styles.css:

:root {
    --ptwidth: 310px
}

.quixote .qx-grid .editor_grid tbody tr td input, .quixote .qx-grid .editor_grid tbody tr td .input-group {
    /*max-width: 450px !important;
    min-width: 450px !important;*/
    max-width: var(--ptwidth) !important;
    min-width: var(--ptwidth) !important;

popup.js:

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

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

$(function(){
    var width = $('#newWidth').val();
    $('#newWidth').on("change paste keyup", function(){
      width = $(this).val();
    });
    $('#btnChange').click(function(){
      chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
        chrome.tabs.sendMessage(tabs[0].id, {todo: "changeWidth", sliderWidth: width})
      });
    });
});

content.js

let root = document.documentElement;

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      if( request.todo == "changeWidth"){
        var updateWidth = request.sliderWidth;
        root.style.setProperty('--ptwidth', updateWidth + "px");
//      start();
      }
    });

Answer 1

看来这个扩展还有一些工作要做。我将尝试仅针对所要求的提供解决方案，其余的留给您处理。

我将尝试解决的问题

您不应该重复使用 popup.js 作为内容脚本。您应该创建一个单独的文件，而不是将一个脚本同时注入网页并在弹出窗口中使用 window.
您还从弹出窗口发送消息 window，但没有任何消息侦听。这也可以通过创建一个单独的内容脚本来侦听这些消息来解决。

部分解决方案

我编辑了 manifest.json 和 popup.js 并创建了一个新文件 content.js。

新建`manifest.json`

将“popup.js”更改为“content.js”

{
  "manifest_version": 3,
  "name": "Hellper",
  "description": "Extension",
  "version": "0.1",

  "icons": { "16": "logo_16_T.png",
             "48": "logo_48_T.png",
            "128": "logo_128_T.png" 
           },

  "action": {
    "default_icon": "logo_16_T.png",
    "default_popup":"popup.html"
            },

  "permissions": ["scripting", "tabs", "activeTab"],
  "host_permissions": ["<all_urls>"],
  
  "content_scripts": [{
    "js": ["jquery-2.2.0.min.js", "content.js"],
    "matches": ["https://www.google.com/*",
                "https://en.wikipedia.org/*",
                "https://whosebug.com/*"]
  }]
}

新建`popup.js`

只编辑了最后一个功能块
为滑块变化添加了监听器
耦合了文本框和滑块中的值，所以当一个改变时，另一个也会改变
将消息参数从“sliderWidth”更改为“newWidth”以使其更通用
将宽度值的检索移动到侦听器中，以便可以发送新的更改值
我还建议完全删除更改按钮，因为其他听众认为它没有必要

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

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

// Changed
$(function () {
  // text input listener
  $("#newWidth").on("change paste keyup", function () {
    const width = $(this).val();
    // update slider
    $("#slider").val(width);
    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { todo: "changeWidth", newWidth: width });
    });
  });
  // listener for change button press
  // button might not be needed anymore because of the text input listener above
  $("#btnChange").click(function () {
    const width = $("#newWidth").val();
    // update slider
    $("#slider").val(width);
    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { todo: "changeWidth", newWidth: width });
    });
  });
  // listener for slider changes
  $("#slider").on("input", function () {
    const width = $("#slider").val();
    // update text box
    $("#newWidth").val(width);
    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { todo: "changeWidth", newWidth: width });
    });
  });
});

新建`content.js`

创建此脚本以侦听从弹出窗口发送的消息，并根据消息

$(document).ready(function () {
  // listen for messages sent to the tab the content script is running in
  chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    // check to see if the message received is something that needs to be acted on
    if (request.todo === "changeWidth") {
      // pull the width data from the message
      const newWidth = request.newWidth;
      // set the style attribute of :root to override the styles.css value for --ptwidth
      document.documentElement.style.setProperty("--ptwidth", newWidth + "px");
    }
    // send a response to avoid errors in popup.js
    sendResponse("Width updated");
  });
});

希望这能让您走上正确的轨道来完成您的扩展！

不要忘记查看 Chrome 扩展的开发者文档。有几篇有用的帖子可以教授如何完成扩展的各个部分。

[1] 消息传递：https://developer.chrome.com/docs/extensions/mv3/messaging/

[2] 内容脚本：https://developer.chrome.com/docs/extensions/mv3/content_scripts/

Answer 2

我在注入 styles.css 后使用 chrome.scripting.insertCSS 替换 --ptwidth 值来实现此功能。到目前为止，一切都只适用于 popup.js，不需要 content.js 文件。

我用它来加载 styles.css 的默认值。

chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
  var activeTab = tabs[0];
    chrome.scripting.insertCSS({
      target: { tabId: activeTab.id, allFrames: true },
    files: ["styles.css"]
    });
});

然后当我从文本框或滑块获得新值时。

  chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    //alert(readsavewidth);
    $("#slider").val(readsavewidth);
    $("#newWidth").val(readsavewidth);
  chrome.scripting.insertCSS({
    target: { tabId: activeTab.id, allFrames: true },
    css: `:root { --ptwidth: ${readsavewidth + "px"} }`
  });
  });
});

我还使用了 chrome.storage.local 来设置和获取上次使用的值。

$(function () {
  // text input listener
  $("#newWidth").on("change paste keyup", function () {
    width = $(this).val();
            //Save it to the localStorage variable which will always remember what you store in it
            chrome.storage.local.set({'savewidth': width});
    // update slider
    $("#slider").val(width);
      chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
        var activeTab = tabs[0];
      chrome.scripting.insertCSS({
        target: { tabId: activeTab.id, allFrames: true },
        css: `:root { --ptwidth: ${width + "px"} }`
      });
    });
  });
  // listener for slider changes
  $("#slider").on("input", function () {
    width = $("#slider").val();
    // update text box
    $("#newWidth").val(width);
        chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
            var activeTab = tabs[0];
        chrome.scripting.insertCSS({
            target: { tabId: activeTab.id, allFrames: true },
            css: `:root { --ptwidth: ${width + "px"} }`
        });
    });

    //Pull text from user inputbox
    var data = width;
    //Save it to the localStorage variable which will always remember what you store in it
      chrome.storage.local.set({'savewidth': data});
  });
});

然后我在弹出窗口打开时获取值，然后它使用 chrome.scripting.insertCSS 函数覆盖 --ptwidth 值。

chrome.storage.local.get('savewidth', function (result) {
  readsavewidth = result.savewidth;

  chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    //alert(readsavewidth);
    $("#slider").val(readsavewidth);
    $("#newWidth").val(readsavewidth);
  chrome.scripting.insertCSS({
    target: { tabId: activeTab.id, allFrames: true },
    css: `:root { --ptwidth: ${readsavewidth + "px"} }`
  });
  });
});

Chrome 扩展 - 更改 styles.CSS var 不工作

Chrome Extension - Change styles.CSS var not working

javascript

css

google-chrome-extension

我将尝试解决的问题

部分解决方案

新建`manifest.json`

新建`popup.js`

新建`content.js`

Chrome 扩展 - 更改 styles.CSS var 不工作

Chrome Extension - Change styles.CSS var not working

javascript

css

google-chrome-extension

我将尝试解决的问题

部分解决方案

新建manifest.json

新建popup.js

新建content.js

新建`manifest.json`

新建`popup.js`

新建`content.js`