2

次のようなイメージ タグと少しの jQuery を持つ HTML があります。

<body>
  <img id="MainImage" src="../img/MainImage.png" style="position: absolute;">
  <script type="text/javascript">
    $(document).ready(function() {
      var $img = $("#MainImage");
      $img.hide();
      $('div').mousemove(function(e) {
        if ($(this).attr('align') === 'center') {
        // only show if the align attribute has value center
        $img.fadeIn(0);
        $img.offset({
          top: e.pageY - $img.outerHeight()-2,
          left: e.pageX - ($img.outerWidth()-18)
        });
      }
    }).mouseleave(function() {
      $img.fadeOut(250);
    });
  </script>
</body>

次のコードを含むこのマニフェスト ファイルもあります。

{
  "name": "Div Image Test",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": [
    "tabs", "http://*/*"
  ],
  "content_scripts": [{
    "matches": ["http://*/*"],
    "js": ["js/CoreTest.html"],
    "run_at": "document_end"
  }]
}

このスクリプト/拡張機能の目的は、ユーザーが任意の div (HTML 属性「align='center'」を使用) にカーソルを合わせるたびに、マウス カーソルの横に画像がポップアップすることです...これは既に機能していますが、必要なもの拡張機能のインストール時に、すべての Web ページの「body」タグにスクリプト/HTML ファイルを挿入します。

どうすればこれを達成できますか？

前もって感謝します。

4

1 に答える 1

1

Chrome 拡張機能でこれを行う方法はわかりませんが、ユーザースクリプトに満足している場合:

ファイルを作成し、その上部にアプリを説明し、名前などを持つ userscript ヘッダーを配置します。これにより、JS (img タグ) を使用して必要なすべての要素を作成し、すべての img にホバーをバインドできます。私は自分でそのようなスクリプトを書きましたが、Instapaper 用です。ソースは次のとおりです。

インストーラー.user.js

// ==UserScript==
// @name          Instalater
// @namespace     http://jcla1.com
// @description   Read Later for Instapaper
// @include       *
// ==/UserScript==

function load() {
code = document.createElement('script');
code.type = 'text/javascript';
code.innerText = "$(document).keydown(function(e){if (e.keyCode == 120){(function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/4VJPghE8ugQm?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}})();void(0);return false;}})";
document.body.appendChild(code);

};

jq = document.createElement('script');
jq.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
jq.type = 'text/javascript';
document.body.appendChild(jq);

setTimeout(load, 1000);
于 2012-11-16T06:08:06.653 に答える