доступ и изменение CSSrules в веб-расширении Chrome - PullRequest
Новая
       6

доступ и изменение CSSrules в веб-расширении Chrome

0 голосов
/ 10 сентября 2018

Я пишу веб-расширение для использования в Firefox, Edge и Chrome, используя только универсальный код (единственное отличие - пространство имен верхнего уровня browser против chrome), используя следующие разрешения в манифесте:

"permissions": [
  "*://*/*",
  "activeTab",
  "storage",
  "webRequest"
]

(Подстановочный знак домена объясняется тем, что это необходимо для страниц http и https)

У меня также есть один фоновый скрипт main.js: 

var namespace = false;

if (typeof browser !== "undefined" && browser.browserAction) {
    namespace = browser;
}
else if (typeof chrome !== "undefined" && chrome.browserAction) {
    namespace = chrome;
}

if (namespace) {
    namespace.browserAction.onClicked.addListener(e => {
        namespace.tabs.executeScript({
            file: `start.js`
        });
    });
} else {
    throw new Error("This browser does not support the webextension 'browser' or 'chrome' namespace.");
}

А затем множество записей content_script, которые приводят к start.js: 

"content_scripts": [
  {
    "matches": [ "*://*/*" ],
    "js": [
      "vendor/base64.js",
      "vendor/codemirror.js",
      "vendor/html-beautify.js",
      "vendor/md5.min.js",
      "vendor/mode/css/css.js",
      "vendor/mode/htmlmixed/htmlmixed.js",
      "vendor/mode/javascript/javascript.js",
      "vendor/mode/xml/xml.js",
      "utilities.js",
      "modal.js",
      "listening.js",
      "editor.js",
      "publisher.js",
      "help.js",
      "pagemixer.js"
    ],
    "css": [
      "vendor/codemirror.css",
      "pagemix.css"
    ]
  }
]

При такой настройке Firefox позволяет мне объединять стили документа, применяемые на текущей вкладке, используя: 

getPageStyle() {
  let css = [];
  Array.from(document.styleSheets).forEach(s => {
    Array.from(s.cssRules).forEach(r => {
      css.push(r.cssText);
    });
  });
  return css.join('\n');
}

Однако в Chrome выдается ошибка CORS:

Uncaught DOMException: не удалось прочитать свойство 'cssRules' из 'CSSStyleSheet': невозможно получить доступ к правилам

Насколько я могу судить, мои разрешения говорят о том, что мое веб-расширение должно работать с локальными правами доступа к странице «где угодно», и поэтому CORS не должен пробиваться сюда: как мне настроить это расширение с полным DOM?Доступ к CSSOM для Chrome?

(Из того, что я могу найти, Невозможно получить доступ к cssRules из локального файла CSS в Chrome 64 , в общем, объясняется «почему», но должны работать веб-расширения.того же источника, что и страница, поэтому это должно работать без дополнительных разрешений, но это не так)

1 Ответ

0 голосов
/ 10 сентября 2018

Добавьте следующую часть в ваш manifest.json.

"web_accessible_resources": [ "vendor/*.js", "*.js", "vendor/*.css", "*.css", ],

Нашел решение по https://developer.chrome.com/extensions/manifest/web_accessible_resources

...