BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] 拡張機能でonclickまたはinlineスクリプトが動作しない

2023-07-17 16:39:33

質問

これは最も簡単なことのように思えますが、うまくいきません。通常のブラウザでは .html と .js ファイルは完全に動作しますが、Chrome/Firefox 拡張モジュールでは onClick 関数が本来の機能を果たしていません。

.jsファイルです。 

function hellYeah(text) {
  document.getElementById("text-holder").innerHTML = text;
}

.htmlファイルです。 

<!doctype html>
<html>
  <head>
    <title>
      Getting Started Extension's Popup
    </title>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="text-holder">
      ha
    </div>
    <br />
    <a onClick=hellYeah("xxx")>
      hyhy
    </a>
  </body>
</html>

つまり、基本的にユーザーが "hyhy" をクリックすると、 "ha" は "xxx" に変更されるはずです。そしてまた、ブラウザでは完全に動作しますが、拡張機能では動作しません。なぜかわかりますか？念のため、以下にmanifest.jsonも添付しておきます。

manifest.jsonです。 

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

どのように解決するのですか？

Chromeの拡張機能では、インラインのJavaScript( ドキュメント ).

Firefox WebExtensions も同様です ( ドキュメント ).

これと似たようなことをすることになります。

リンクにIDを割り当てる ( <a onClick=hellYeah("xxx")> は <a id="link"> となります）、また addEventListener を使用してイベントをバインドします。以下を popup.js ファイルに記述します。 

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {
        hellYeah('xxx');
    });
});

popup.js は別のスクリプトファイルとして読み込まれる必要があります。 

<script src="popup.js"></script>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します