0

以下のコードを使用して、単純なクロム拡張機能を作成し、テキストとボタンを入力しようとしています。ボタンをクリックすると、特定の URL を取得したいと考えています。コードの書き方に困っています。私はJavaScriptにかなり慣れていません。

<!doctype html>
<html>
  <head>
  <title>Title Name</title>
      <style>
  body {
    min-width: 357px;
    overflow-x: hidden;
  }

  img {
    margin: 5px;
    border: 2px solid black;
    vertical-align: middle;
    width: 75px;
    height: 75px;
  }
</style>

 </head>
 <body>
    <input type="text" name="enter" class="enter" value="67" id="lolz" />
    <button type="button" id="the_button">LookUp Site ID</button>
    <script src="popup.js"></script>
</body>
</html>

popup.js - 更新

var VanillaRunOnDomReady = function() {
 document.getElementById('the_button').addEventListener('click', myFunction);
   function myFunction() { 
var siteid = document.getElementById('lolz').value 
  //window.location = "https://www.websiteimusing.com/siteid" + siteid;
  chrome.tabs.create({ url: "https://www.websiteimusing.com/siteid" + siteid}); 
  }
 }

}

マニフェスト.json

{
   "manifest_version": 2,

   "name": "ID URL opener",
   "description": "Enter ID and it will pull up the correct URL",
   "version": "1.0",

   "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
   },
 "permissions": ["tabs"]
}

現在のエラー - 更新済み

ボタンのクリック時に実際に URL をロードすることはありません。何かアイデアはありますか?

4

1 に答える 1

6

わかりました、実装は実際には非常に簡単です。これに background.js ファイルを追加するだけです。

拡張の流れは次のとおりです。

  1. popup.js は入力テキストを受け取ります
  2. popup.js は、新しいタブ リクエストのイベント リクエストを発生させます。
  3. background.js はイベントをリッスンし、リクエストからデータを取得します
  4. background.js は、src を url+input として使用して新しいタブを作成します。

このコードを書いてもよろしいですか?

編集：コード

最良の部分は、ポップアップからタブのアクセス許可にアクセスできる最新のクロム拡張ドキュメントに従って、background.js にメッセージを渡す必要がなくなることです。次のコードは、ポップアップで入力文字列を取得し、入力文字列が Google で検索される新しいタブにユーザーを送信します。ほとんどのコードは一目瞭然です。うまくいかない場合は、Crx + ソースをお送りします。

マニフェスト.json:

{
    "name"          : "Simple Search",
    "version"       : "0.1",
    "manifest_version"  : 2,
    "description"       : "Simple Search Plugin",
    "browser_action": {
      "default_icon": {
      "19": "images/icon_48.png"
    },
    "default_title": "Simple Search",
    "default_popup": "popup.html"
  },
    "permissions"       :
        [
            "tabs"
        ],
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

popup.html

<html>
  <head>
    <style>
            body{
                font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body style="width:300px;">
    <center>
      <h1>Simple Search</h1>
      <input type="text" id="q"></input>
      <input type="button" id="s" value="search">
    </center>
  </body>
</html>

popup.js

$(function() {
  $('#s').click(function() {
     var url  = "https://www.google.com/search?q=" + $('#q').val();
     chrome.tabs.create({url: url});
  });
});

document.addEventListener('DOMContentLoaded');
于 2013-07-17T04:23:04.103 に答える