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

问题描述 投票:0回答:1

我试图从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中删除了大量无用的代码,希望有助于提高可读性。请原谅我的邋iness,因为我还是很陌生。谢谢!

编辑:为了澄清,我试图从background.js中的行const INVERT = ".pdfViewer .canvasWrapper {filter: invert(100%);}";开始实现这一点

javascript css firefox-webextensions
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.