Question

尝试编写Chrome扩展程序来更改字体时，我无法访问DOM。我不断收到错误消息：“事件处理程序中的错误：TypeError：无法读取未定义的属性'executeScript'”

我已经尝试按照this stackoverflow answer的说明进行操作，但是它对我没有用。我还尝试遵循Chrome Extension documentation的内容脚本。

我可以成功地将消息从弹出脚本传递到内容脚本。做console.log（document）时，它给了我要编辑的DOM。

这是我的弹出脚本：

function sendArial() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, {data : "arial"}, function(response) {
            console.log('success');
        });
    })};

function sendGeorgia() { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {data : "georgia"}, function(response) {
            console.log('success');
        });
    })};


function sendHelvetica() { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {data : "helvetica"}, function(response) {
            console.log('success');
        });
    })};

function sendTimeNewRoman() { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {data : "times new roman"}, function(response) {
            console.log('success');
        });
    })};

arial.addEventListener('click', sendArial);
georgia.addEventListener('click', sendGeorgia);
helvetica.addEventListener('click', sendHelvetica);
timesnewroman.addEventListener('click', sendTimeNewRoman);

这是我的内容脚本：

chrome.runtime.onMessage.addListener(
  function(request) {
    if (request.data == "arial") {
      console.log('success! arial');
      console.log(document);
      chrome.tabs.executeScript(
          {file: 'arial.js'});
    }
    else if (request.data == "georgia"){
      console.log('success! georgia');
      console.log(document);
      chrome.tabs.executeScript(
          georgiaFontStyle()
        );
    }
    else if (request.data == "helvetica") {
      console.log('success! helvetica');
      console.log(document);
      helveticaFontStyle();
    }
    else if (request.data == "times new roman"){
      console.log('success! times');
      console.log(document);
      timesNewRomanFontStyle();
    }
  });
  
  function georgiaFontStyle() {
  var p = document.querySelectorAll("p");
  var textStyle = p.style;
  textStyle.cssText = 'font-family: Georgia; font-size: 20px; line-height: 1.45;';
  textStyle.margin = '0 auto';
  textStyle.width = '35em';
}

function helveticaFontStyle() {
  var p = document.querySelectorAll("p");
  var textStyle = p.style;
  textStyle.cssText = 'font-family: Helvetica Neue; font-size: 20px; line-height: 1.45;';
  textStyle.margin = '0 auto';
  textStyle.width = '35em';
}

function timesNewRomanFontStyle() {
  var p = document.querySelectorAll("p");
  var textStyle = p.style;
  textStyle.cssText = 'font-family: Times New Roman; font-size: 20px; line-height: 1.45;';
  textStyle.margin = '0 auto';
  textStyle.width = '35em';
}

这是内容脚本中调用的arial.js脚本：

function arialFontStyle() {
p = document.querySelectorAll("p");
textStyle = p.style;
textStyle.cssText = 'font-family: Arial; font-size: 20px; line-height: 1.45;';
textStyle.margin = '0 auto';
textStyle.width = '35em';
}

我将这些功能留在了内容脚本中，并在如何调用它们方面作了一些改动，以演示这种类型的问题。对于helveticaFontStyle（）和timesNewRomanFontStyle（）的情况，错误消息显示 “事件处理程序中的错误：TypeError：无法设置未定义的属性'cssText'”

arialFontSelection（）和georgiaFontSelection（）都给我： “事件处理程序中的错误：TypeError：无法读取未定义的属性'executeScript'”

这是github仓库，大致相同。 https://github.com/smcalilly/gutenberg-typography

请帮助！谢谢。

chrome扩展名更改字体

0 个答案: