如何使用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扩展

回答

相关问题