Chrome擴展程序用擴展彈出式按鈕改變DOM

我對鉻擴展開發完全陌生。我試圖改變DOM（追加數據到活動網頁）當點擊一個按鈕在擴展彈出。這怎麼可能。Chrome擴展程序用擴展彈出式按鈕改變DOM

清單文件

{ 
    "manifest_version": 2, 

    "name": "test 2", 
    "description": "test ext 2", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*","https://*/*"], 
     "js": ["jquery.min.js", "main.js"] 
    } 
    ], 
    "permissions": [ 
    "activeTab" 
    ] 
}

假設如果popup.html文件

<!doctype html> 
<html> 
    <head> 
    <title>test extension 2</title> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    <a id="button">button</a> 
    </body> 
</html>

，當我在＃鍵點擊，我想執行的main.js文件中的一些jQuery的代碼會將一些數據附加到活動網頁。

謝謝。

來源

2016-07-25 Arun Thomas

的可能的複製[Chrome擴展 - 消息從彈出傳遞到內容腳本]（http://stackoverflow.com/問題/ 6108906/chrome-extension-message-passing-from-popup-to-content-script） –

@HaibaraAi如果我的問題被這樣的重複封閉，我不知道該怎麼做。這只是解決方案的一小部分。 – Xan

感謝您提供的鏈接。它有助於獲得一個想法，但現在我正在尋找在popup.html中加入一個按鈕，並添加一個將更改活動頁面的DOM的偵聽器。我正在尋找這樣的東西，[鏈接]（http://stackoverflow.com/questions/11996053/detect-a-button-click-in-the-browser-action-form-of-a-google-chrome-擴展名） –

使用Programmatic injection。您可以在popup.js中註冊事件監聽器，並調用chrome.tabs.executeScript將一些js代碼/文件注入當前活動選項卡。這需要主機權限。

popup.js

document.getElementById('button').addEventListener('click', function() { 
    chrome.tabs.query({ active: true, currentWindow: true}, function(activeTabs) { 
     // WAY 1 
     chrome.tabs.executeScript(activeTabs[0].id, { code: 'YOUR CODE HERE' }); 
    }); 
});

使用Message Passing。您可以在popup.js中調用chrome.tabs.sendMessage，並通過content.js中的chrome.runtime.onMessage收聽。

popup.js

// WAY 2 (Replace WAY1 with following line) 
chrome.tabs.sendMessage(activeTabs[0].id, { action: 'executeCode' });

content.js

chrome.runtime.onMessage.addListener(function(request) { 
    if(request.action === 'executeCode') { 
     // YOUR CODE HERE 
    } 
});

使用Storage。您可以在popup.js中致電chrome.storage.local.set，並通過chrome.storage.onChanged收聽content.js中的存儲更改。

popup.js

// WAY 3 (Replace WAY1 with following line) 
chrome.storage.local.set({ action: 'executeCode' });

content.js

chrome.storage.onChanged.addListener(function(changes) { 
    var action = changes['action']; 
    if(action.newValue === 'executeCode') { 
     // YOUR CODE HERE 
    } 
});

來源

2016-07-26 00:34:24

謝謝Haibara。我查了一些文件。但我沒有得到一個適當的想法，但這有助於 –

Chrome擴展程序用擴展彈出式按鈕改變DOM

回答

相關問題