Question

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

manifest.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"
            }
        }
    }
}

background.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

由于不再允许扩展程序与本机pdf查看器进行交互，因此不再可能。

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

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

1 个答案: