如何使用Chrome擴展

嗨，我一直在尋找很多的教程來實現網站並不能找到任何這可能是我那可憐的谷歌的技巧，但我希望答案是快速和簡單。如何使用Chrome擴展

該計劃

的目的是使一個擴展，它會用javascript追加任何網站。

現狀

我目前已經JavaScript的附加編碼和基本宣言創建

document.body.innerHTML += '<div id="adBar" style="background-color: #933131; width: 150px; height: 400px; position: fixed; left: 10px; top: 25%;"></div>'

的問題

我找不到任何地方如何創建一個Chrome擴展這將允許此腳本在每個頁面的後臺運行，我只能找到如何使點擊彈出窗口。

我希望這是簡單明瞭的。所有幫助表示讚賞！

來源

2016-02-01 Matt Hammond

注意，這個代碼將徹底摧毀任何頁面，因爲它會破壞所有的事件處理程序。不要使用'innerHTML'。 – Xan

@xan你會推薦什麼？ –

創建一個元素，設置其屬性並將其附加到body元素。 – Xan

您需要設置matches到<all_urls>（你也可以添加一個按鈕，擴展到觸發它）。這是我的完整的例子：

Extension Buttons

My Extension 
├── manifest.json 
├── background.js 
├── content.js 
├── jquery-2.2.0.min.js 
├── icon.png

manifest.json的

{ 
    "manifest_version": 2, 
    "name": "My Extension", 
    "version": "0.1", 
    "content_scripts": [ 
     { 
      "matches": [ 
       "<all_urls>" 
      ], 
      "js": ["jquery-2.2.0.min.js","content.js"] 
     } 
    ], 
    "browser_action": { 
     "default_icon": "icon.png" 
    }, 
    "background": { 
     "scripts": ["background.js"] 
    }, 
    "icons": { 
     "16": "icon.png", 
     "48": "icon.png", 
     "128": "icon.png" 
    } 
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) { 
    // Send a message to the active tab 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    var activeTab = tabs[0]; 
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"}); 
    }); 
});

content.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if(request.message === "clicked_browser_action") { 

     //YOUR CODE GOES HERE 

    } 
    } 
);

基本上我添加一個按鈕，一旦它被壓調用content.js延伸。聆聽者在background.js。

來源

2016-02-01 16:41:02

謝謝您的深入解答！ –

將jQuery添加到內容腳本中，我猜測允許我在jQuery中編寫代碼，將我的Javascript更改爲類似$（「body」）的內容。 –

可以在content scripts包裹代碼，並使用「all_urls」的比賽模式。

的manifest.json

{ 
    "name": "Test", 
    "version": "1.0", 
    "description": "Test", 
    "content_scripts": [ 
    { 
     "matches": [ 
     "<all_urls>" 
     ], 
     "js": [ 
     "content.js" 
     ], 
     "run_at": "document_end", 
     "all_frames": true 
    } 
    ], 
    "manifest_version": 2 
}

content.js

document.body.innerHTML += '<div id="adBar" style="background-color: #933131; width: 150px; height: 400px; position: fixed; left: 10px; top: 25%;"></div>'

來源

2016-02-01 05:08:21

感謝您的幫助！ –

如何使用Chrome擴展

回答

相關問題