javascript - 有没有办法通过浏览器扩展覆盖内置 Firefox PDF 阅读器的 CSS？

Question

我正在尝试反转在 Firefox 的内置 PDF 查看器中查看的 PDF 文件的颜色。我能够通过在 .pdfViewer .page 属性中添加 filter:invert(100%) 来达到预期的效果，在 Firefox 样式编辑器中。但是，当我尝试通过我创建的扩展程序应用此更改时，没有任何效果。我知道该扩展适用于在浏览器中查看的普通网页和文本文件。

list .json

{

  "description": "blahblahblah",
  "manifest_version": 2,
  "name": "DarkWeb",
  "version": "1.0",
  "homepage_url": "blahblahblah",
  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {

    "default_icon": "icons/sun.png",
    "browser_style": true,
    "default_popup":"popup/settings.html"
  },
  "permissions": [
    "<all_urls>",
    "tabs",
    "activeTab"
  ],
  "commands": {
        "toggle-feature": {
            "suggested_key": {
                "default": "Ctrl+Space",
                "mac": "Alt+Space"
            }
        }
    }
}

背景.js

//const CSS = "body {filter: invert(100%); background-color: white; color: black;}";
const TITLE_APPLY = "Apply CSS";
const TITLE_REMOVE = "Remove CSS";
const APPLICABLE_PROTOCOLS = ["http:", "https:"];

// Different settings for different buttons
var CSS = ""; // Will hold code for various filters
var previousID = ""; // Will hold previous button id for filters

const INVERT = ".pdfViewer .canvasWrapper {filter: invert(100%);}";

/*
Add an event listener
The popup window's event listener broadcasts a message, and this receives it
Upon receiving a message, it then runs updateFilter()
*/

browser.commands.onCommand.addListener(function(command) {
  if (command == "toggle-feature") {
    toggleFilters("Invert");
  }
});

browser.runtime.onMessage.addListener(updateFilter);
function updateFilter(recieved, sender, sendResponse) {
  toggleFilters(recieved.message);
  sendResponse({response: "Response from background.js."});
}

// This listener is for newly-created tabs
// After the user switches to the new tab, the code then runs updateNewTab()
browser.tabs.onUpdated.addListener(updateNewTab); 
function updateNewTab(recieved, sender, sendResponse) {
  var tabID = browser.tabs.getCurrent().id;
  browser.tabs.insertCSS(tabID, {code: CSS});
}

// Applies the desired filter's code to the CSS variable
function setCSScode(buttonID) {
  switch(buttonID) {
    case "Invert":    CSS = INVERT;    break;
    default: break; // Do nothing for default
  }
}

/*
 Compares the current filter to the selected filter.
 First removes the previous filter, and then checks if it should apply a new filter
 If the selected filter is the same as the current filter, then it will just remove it.
 Else, it will apply the new filter.
*/
function toggleFilters(buttonID) {
  removeAllFilters(); // To apply a new filter, we must first remove the all filters
  CSS = ""; // Reset the CSS variable. This fixes tab persistence.
  if(previousID == buttonID) {
    previousID = "";
  }
  else {
    setCSScode(buttonID);
    previousID = buttonID;
    applyFilter();
  }
}

// Apply the selected filter to all tabs
function applyFilter() {
  var gettingAllTabs = browser.tabs.query({});
  gettingAllTabs.then((tabs) => {
    for (let currentTab of tabs) {
      var tabID = currentTab.id;
      browser.tabs.insertCSS(tabID, {code: CSS});
    }
  });
}

// Remove the all filters from all tabs
function removeAllFilters() {
  var cssCodes = [INVERT];
  var gettingAllTabs = browser.tabs.query({});
  gettingAllTabs.then((tabs) => {
    for (let currentTab of tabs) { 
      var tabID = currentTab.id;
      cssCodes.forEach(function(item) {
        var code = item; browser.tabs.removeCSS(tabID, {code: code});
      });
    }
  });
}

我已经从 background.js 中删除了大量无礼的代码，希望有助于提高可读性。请原谅我的草率，因为我对此还很陌生。谢谢!

编辑:为了澄清起见，我试图从 background.js 中的 const INVERT = ".pdfViewer .canvasWrapper {filter: invert(100%);}"; 行开始完成此操作

Answer 1

这已经不可能了，因为不再允许扩展程序与 native pdf 查看器交互。

https://bugzilla.mozilla.org/show_bug.cgi?id=1454760