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

huangapple
go评论172阅读模式
英文:

how to create chrome extension for google translate?

问题

我想创建一个Chrome扩展程序，用于将页面翻译成我的语言。

我的解决方案没有起作用：

  1. function google_translate_api(){
  2.   var script = document.createElement("script");
  3.   script.type = "text/javascript";
  4.   script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
  5.   document.body.appendChild(script);
  6. }
  7. function tElement(){
  8.   var gt = document.createElement('div');
  9.   gt.setAttribute("id", "google_translate_element");
  10.   document.body.appendChild(gt);
  11. }
  12. function googleTranslateElementInit() {
  13.   new google.translate.TranslateElement(
  14.     {pageLanguage: 'en'},
  15.     'google_translate_element'
  16.   );
  17. }
  18. chrome.action.onClicked.addListener(async (tab) => {
  19.   if (tab.url || tab.url) {
  20.     const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
  21.     const nextState = prevState === 'ON' ? 'OFF' : 'ON'
  22.     await chrome.action.setBadgeText({
  23.       tabId: tab.id,
  24.       text: nextState,
  25.     });
  26.   }
  27. });
  28. function changeHtmlLangFr(){
  29.   document.documentElement.setAttribute('lang','fr')
  30.   tElement()
  31.   google_translate_api()
  32. }
  33. function changeHtmlLangEn(){
  34.   document.documentElement.setAttribute('lang','en')
  35.   tElement()
  36.   google_translate_api()
  37. }
  38. if (nextState === "ON") 
  39. {
  40.   await chrome.scripting.executeScript({
  41.     target : {tabId : tab.id},
  42.     func : changeHtmlLangFr,
  43.   });
  44. } 
  45. else if (nextState === "OFF") 
  46. {
  47.    await chrome.scripting.executeScript({
  48.      target : {tabId : tab.id},
  49.      func : changeHtmlLangEn,
  50.    });
  51. }
  52. });

我想通过运行这个扩展程序将整个页面翻译成法语。在manifest.json文件中有一个suggested_key来运行这个扩展程序。

有没有办法制作这个扩展程序？请帮助我。

英文:

I want create chrome extension for translate page to my language.

My solution didn't work:

  1. function google_translate_api(){
  2. var script = document.createElement("script");
  3. script.type = "text/javascript";
  4. script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
  5. document.body.appendChild(script);
  6. }
  7. function tElement(){
  8. var gt = document.createElement('div');
  9. gt.setAttribute("id", "google_translate_element");
  10. document.body.appendChild(gt);
  11. }
  12. function googleTranslateElementInit() {
  13. new google.translate.TranslateElement(
  14. {pageLanguage: 'en'},
  15. 'google_translate_element'
  16. );
  17. }
  18. chrome.action.onClicked.addListener(async (tab) => {
  19. if (tab.url || tab.url) {
  20. const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
  21. const nextState = prevState === 'ON' ? 'OFF' : 'ON'
  22. await chrome.action.setBadgeText({
  23. tabId: tab.id,
  24. text: nextState,
  25. });
  26. chrome.runtime.onInstalled.addListener(() => {
  27. chrome.action.setBadgeText({
  28. text: "OFF",
  29. });
  30. });
  31. function changeHtmlLangFr(){
  32. document.documentElement.setAttribute('lang','fr')
  33. tElement()
  34. google_translate_api()
  35. }
  36. function changeHtmlLangEn(){
  37. document.documentElement.setAttribute('lang','en')
  38. tElement()
  39. google_translate_api()
  40. }
  41. if (nextState === "ON") 
  42. {
  43. await chrome.scripting.executeScript({
  44. target : {tabId : tab.id},
  45. func : changeHtmlLangFr,
  46. });
  47. } 
  48. else if (nextState === "OFF") 
  49. {
  50. await chrome.scripting.executeScript({
  51. target : {tabId : tab.id},
  52. func : changeHtmlLangEn,
  53. });
  54. }
  55. }
  56. });

I want the entire page to be translated into French by running this extension. and in the manifest.json file there is a suggested_key that to run this extension.

Is there a solution to make this extension? Help me please.

答案1

得分: 1

以下是您提供的内容的中文翻译：

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

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

manifest.json

  1. {
  2.   "manifest_version": 3,
  3.   "name": "googleTranslate",
  4.   "version": "1.0",
  5.   "action": {
  6.     "default_popup": "popup.html"
  7.   },
  8.   "permissions": [
  9.     "scripting"
  10.   ],
  11.   "host_permissions": [
  12.     "<all_urls>"
  13.   ]
  14. }

popup.html

  1. <html>
  2. <body>
  3.   <button id="submit">提交</button>
  4.   <script src="popup.js"></script>
  5. </body>
  6. </html>

popup.js

  1. function googleTranslate() {
  2.   function RegistergoogleTranslateElementInit() {
  3.     const script = document.createElement("script");
  4.     script.innerText =
  5.       "function googleTranslateElementInit() {" +
  6.       "  console.log('googleTranslateElementInit');" +
  7.       "  new google.translate.TranslateElement(" +
  8.       "    { pageLanguage: 'en', includedLanguages: 'es,fr,it' }," +
  9.       "    'google_translate_element'" +
  10.       "  );" +
  11.       "}";
  12.     document.body.appendChild(script);
  13.   }
  15.   function tElement() {
  16.     var gt = document.createElement("div");
  17.     gt.setAttribute("id", "google_translate_element");
  18.     document.body.insertBefore(gt, document.body.children[0]);
  19.   }
  21.   function google_translate_api() {
  22.     const script = document.createElement("script");
  23.     script.type = "text/javascript";
  24.     script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
  25.     document.body.appendChild(script);
  26.   }
  28.   RegistergoogleTranslateElementInit();
  29.   tElement();
  30.   google_translate_api();
  31. }
  33. document.getElementById("submit").onclick = async () => {
  34.   const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
  35.   chrome.scripting.executeScript(
  36.     {
  37.       target: { tabId: tabs[0].id },
  38.       world: "MAIN",
  39.       func: googleTranslate
  40.     }
  41.   );
  42. }
英文:

This is not a complete answer, but I hope it helps.

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

manifest.json

  1. {
  2.   &quot;manifest_version&quot;: 3,
  3.   &quot;name&quot;: &quot;googleTranslate&quot;,
  4.   &quot;version&quot;: &quot;1.0&quot;,
  5.   &quot;action&quot;: {
  6.     &quot;default_popup&quot;: &quot;popup.html&quot;
  7.   },
  8.   &quot;permissions&quot;: [
  9.     &quot;scripting&quot;
  10.   ],
  11.   &quot;host_permissions&quot;: [
  12.     &quot;&lt;all_urls&gt;&quot;
  13.   ]
  14. }

popup.html

  1. &lt;html&gt;
  2. &lt;body&gt;
  3.   &lt;button id=&quot;submit&quot;&gt;submit&lt;/button&gt;
  4.   &lt;script src=&quot;popup.js&quot;&gt;&lt;/script&gt;
  5. &lt;/body&gt;
  6. &lt;/html&gt;

popup.js

  1. function googleTranslate() {
  2.   function RegistergoogleTranslateElementInit() {
  3.     const script = document.createElement(&quot;script&quot;);
  4.     script.innerText =
  5.       &quot;function googleTranslateElementInit() {&quot; +
  6.       &quot;  console.log(&#39;googleTranslateElementInit&#39;);&quot; +
  7.       &quot;  new google.translate.TranslateElement(&quot; +
  8.       &quot;    { pageLanguage: &#39;en&#39;, includedLanguages: &#39;es,fr,it&#39; },&quot; +
  9.       &quot;    &#39;google_translate_element&#39;&quot; +
  10.       &quot;  );&quot; +
  11.       &quot;}&quot;;
  12.     document.body.appendChild(script);
  13.   }
  15.   function tElement() {
  16.     var gt = document.createElement(&quot;div&quot;);
  17.     gt.setAttribute(&quot;id&quot;, &quot;google_translate_element&quot;);
  18.     document.body.insertBefore(gt, document.body.children[0]);
  19.   }
  21.   function google_translate_api() {
  22.     const script = document.createElement(&quot;script&quot;);
  23.     script.type = &quot;text/javascript&quot;;
  24.     script.src = &quot;//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit&quot;;
  25.     document.body.appendChild(script);
  26.   }
  28.   RegistergoogleTranslateElementInit();
  29.   tElement();
  30.   google_translate_api();
  31. }
  33. document.getElementById(&quot;submit&quot;).onclick = async () =&gt; {
  34.   const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
  35.   chrome.scripting.executeScript(
  36.     {
  37.       target: { tabId: tabs[0].id },
  38.       world: &quot;MAIN&quot;,
  39.       func: googleTranslate
  40.     }
  41.   );
  42. }

huangapple
  • 本文由 发表于 2023年6月8日 15:57:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76429761.html
  • chrome-extension-manifest-v3
  • google-chrome
  • google-chrome-extension
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定