如何创建谷歌翻译Chrome扩展？

lndjwyie 于 2023-06-19 发布在 Go

关注(0)|答案(1)|浏览(95)

我想为翻译页面创建Chrome扩展到我的语言。
我的解决方案不起作用：

function google_translate_api(){
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
  document.body.appendChild(script);
}
function tElement(){
  var gt = document.createElement('div');
  gt.setAttribute("id", "google_translate_element");
  document.body.appendChild(gt);
}
function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    {pageLanguage: 'en'},
    'google_translate_element'
  );
}
chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url || tab.url) {
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    const nextState = prevState === 'ON' ? 'OFF' : 'ON'
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
     text: "OFF",
  });
});
function changeHtmlLangFr(){
  document.documentElement.setAttribute('lang','fr')
  tElement()
  google_translate_api()
}
function changeHtmlLangEn(){
  document.documentElement.setAttribute('lang','en')
  tElement()
  google_translate_api()
}
if (nextState === "ON") 
{
  await chrome.scripting.executeScript({
    target : {tabId : tab.id},
    func : changeHtmlLangFr,
  });
} 
else if (nextState === "OFF") 
{
   await chrome.scripting.executeScript({
     target : {tabId : tab.id},
     func : changeHtmlLangEn,
   });
}
}
});

我想通过运行此扩展将整个页面翻译成法语。在manifest.json文件中，有一个suggested_key来运行这个扩展。
是否有解决方案来进行此扩展？请帮帮我。

google-chrome

来源：https://stackoverflow.com/questions/76429761/how-to-create-chrome-extension-for-google-translate

1条答案

按热度按时间

f2uvfpb91#

这不是一个完整的答案，但我希望它能有所帮助。

manifest.json

{
  "manifest_version": 3,
  "name": "googleTranslate",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

popup.html

<html>
<body>
  <button id="submit">submit</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

function googleTranslate() {
  function RegistergoogleTranslateElementInit() {
    const script = document.createElement("script");
    script.innerText =
      "function googleTranslateElementInit() {" +
      "  console.log('googleTranslateElementInit');" +
      "  new google.translate.TranslateElement(" +
      "    { pageLanguage: 'en', includedLanguages: 'es,fr,it' }," +
      "    'google_translate_element'" +
      "  );" +
      "}";
    document.body.appendChild(script);
  }

  function tElement() {
    var gt = document.createElement("div");
    gt.setAttribute("id", "google_translate_element");
    document.body.insertBefore(gt, document.body.children[0]);
  }

  function google_translate_api() {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
    document.body.appendChild(script);
  }

  RegistergoogleTranslateElementInit();
  tElement();
  google_translate_api();
}

document.getElementById("submit").onclick = async () => {
  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript(
    {
      target: { tabId: tabs[0].id },
      world: "MAIN",
      func: googleTranslate
    }
  );
}

赞(0）回复(0）举报 2023-06-19

我来回答

如何创建谷歌翻译Chrome扩展？

1条答案

相关问题

热门标签

最新问答