創建Chrome擴展程序

我剛開始創建Chrome擴展程序。我已閱讀了一些教程。但如何創建一個處理頁面事件。我想突出顯示瀏覽器中的文本並更改顏色。我已經編寫了所有HTML和jQuery代碼，但我不知道如何將它作爲Chrome擴展組合使用任何幫助表示讚賞。創建Chrome擴展程序

所以我有下面這些代碼：

manifest.json的：

{ 
    "manifest_version": 2, 

    "name": "Select text", 
    "description": "This extension demonstrates a browser action with selected text.", 
    "version": "1.0", 
    "background" : {"page":"background.html"}, 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    } 
}

background.html：

<html> 
    <head> 
     <title></title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <script> 
     $(document).ready(function(){ 


      function getSelectedId(){ 
      $(document).ready(function(){ 

       $('div').click(function(){ 

        var name = $(this).attr('id'); 
        $("#result2").fadeIn(); 
        $("#res").html(name); 

        console.log(name); 

       }); 
      }); 
      } 



     $('body').click(function(){getSelectedId();}); 


}); 
    </script> 
    <style> 

     #res{font-size: 2.5em;} 
     #result2 {width: 200px;height: 150px;background-color: gray; color: white;position: absolute; display: none; text-align: center; 
      -moz-box-shadow: -1px 0px 21px #000000; 
-webkit-box-shadow: -1px 0px 21px #000000; 
box-shadow: -1px 0px 21px #000000; 
border:solid 1px #404040; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
     } 
    </style> 
    <div id="bbb">gggggg</div> 

<div id="result2"> 
    <p>The ID is:</p> 
    <p id="res"></p> 
</div> 
    </body> 
</html>

所以我希望的是，當我點擊任何的div popup.html或頁面上的某處我假設background.html將淡化該div「ID」。我怎麼做？

抱歉，這是我的第一個Chrome擴展試圖:(

來源

2013-06-18 medzi

閱讀[開始：構建Chrome擴展]（http://developer.chrome.com/extensions/getstarted.html） – AurA

謝謝，我已經閱讀過它。但仍然困惑。我只想調用與窗口或瀏覽器交互的.js文件。即使只是簡單的點擊提示:( – medzi

你必須看着content-scripts，這些JS腳本打包你的擴展，可用於與第三方網站的元素進行交互。

您定義將在matches宣佈他們觸發清單內容腳本的網站。在js你告訴擴展需要激活的腳本。

{ 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "js": ["jquery.js", "myscript.js"] 
    } 
    ] 
    ... 
}

在這個例子中，如果我們在擴展的根目錄中包含myscript.js，我們可能會有這樣的事情，當我們登陸Google.com時會觸發警報。

alert("We're now on Google.com");

我覺得應該讓你離開地面！

來源

2013-06-18 13:38:33 QFDev

我更新了我的文章，請你幫忙嗎？謝謝 – medzi

我認爲你需要從頭開始。背景頁面不應該包含用戶界面，並被設計爲一種溝通方式你的擴展的不同部分，後臺頁面和popup.html將需要消息傳遞邏輯（http://developer.chrome.com/extensions/messaging.html），這是一個非常先進的概念。（即我的例子），並在那裏工作，當你更熟悉什麼擴展可以做 – QFDev

好吧，那麼什麼是最簡單的方法來顯示元素ID一旦點擊和浮動瀏覽器中的某個div？我知道我可以用jQuery做所有這些，但是我想用擴展來做，很多謝謝 – medzi

創建Chrome擴展程序

回答

相關問題