如何使用Chrome扩展程序影响网站

马特·哈蒙德

嗨,我一直在看很多教程,找不到任何可能是我的Google技能差的东西,但我希望答案是快速而简单的。

计划

目的是进行扩展,以使用javascript附加任何网站。

当前状态

我目前有javascript附加编码和基本清单创建

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

问题

我在任何地方都找不到如何创建Chrome扩展程序的方法,该扩展程序将允许该脚本在每个页面的后台运行,我只能找到如何在单击时弹出一个窗口。

我希望这是简单明了的。感谢所有帮助!

杰拉德·卡德拉斯(Gerard Cuadras)

您需要设置matches<all_urls>(也可以向扩展名添加按钮以触发它)。这是我的完整示例:

扩展按钮

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从常规网站调用Chrome扩展程序中定义的功能?

来自分类Dev

如何使用解压缩的扩展程序启动Chrome?

来自分类Dev

如何使用Intellij IDE调试Chrome扩展程序?

来自分类Dev

我如何在Chrome扩展程序中嵌入网站

来自分类Dev

如何使用JavaScript设置Chrome扩展程序的文件下载位置?

来自分类Dev

如何在我的网站中使用Chrome扩展功能(NaCl)?

来自分类Dev

Chrome扩展程序:获取当前网站名称

来自分类Dev

Google Chrome扩展程序热门网站图片

来自分类Dev

如何使用WebRTC insde Google Chrome扩展程序?

来自分类Dev

使用Selenium时如何选择要启用的Chrome扩展程序

来自分类Dev

如何使用Chrome扩展程序监听网址更改

来自分类Dev

如何使用Chrome扩展程序将按钮注入网页

来自分类Dev

如何在Selenium中使用Google Chrome扩展程序?

来自分类Dev

如何通过Chrome扩展程序在特定网站上触发功能?

来自分类Dev

如何在我的网站和chrome扩展程序之间保持用户的登录状态

来自分类Dev

如何使用Selenium和Python安装Chrome扩展程序

来自分类Dev

使用AWS Amplify通过网站登录到Chrome扩展程序

来自分类Dev

用户访问特定网站时,如何自动将网址保存在Google Chrome扩展程序中?

来自分类Dev

如何使用Chrome扩展程序关闭当前的Chrome标签?

来自分类Dev

使用DevTools的Chrome扩展程序

来自分类Dev

从Chrome扩展程序访问网站数据

来自分类Dev

如何使用Intellij IDE调试Chrome扩展程序?

来自分类Dev

如何使用javascript在chrome扩展程序中创建会话?

来自分类Dev

如何在我的网站中使用Chrome扩展功能(NaCl)?

来自分类Dev

如何使用Chrome扩展程序/插件访问HTML元素?

来自分类Dev

从网站调用Chrome扩展程序中的函数

来自分类Dev

如何从Chrome扩展程序中的网站获取完整的HTML源代码

来自分类Dev

Chrome扩展程序可在所有网站上使用,并仅对少数几个网站执行不同的操作

来自分类Dev

如何使用Chrome扩展程序内容脚本将具有相同域的多个网站进行匹配

Related 相关文章

  1. 1

    如何从常规网站调用Chrome扩展程序中定义的功能?

  2. 2

    如何使用解压缩的扩展程序启动Chrome?

  3. 3

    如何使用Intellij IDE调试Chrome扩展程序?

  4. 4

    我如何在Chrome扩展程序中嵌入网站

  5. 5

    如何使用JavaScript设置Chrome扩展程序的文件下载位置?

  6. 6

    如何在我的网站中使用Chrome扩展功能(NaCl)?

  7. 7

    Chrome扩展程序:获取当前网站名称

  8. 8

    Google Chrome扩展程序热门网站图片

  9. 9

    如何使用WebRTC insde Google Chrome扩展程序?

  10. 10

    使用Selenium时如何选择要启用的Chrome扩展程序

  11. 11

    如何使用Chrome扩展程序监听网址更改

  12. 12

    如何使用Chrome扩展程序将按钮注入网页

  13. 13

    如何在Selenium中使用Google Chrome扩展程序?

  14. 14

    如何通过Chrome扩展程序在特定网站上触发功能?

  15. 15

    如何在我的网站和chrome扩展程序之间保持用户的登录状态

  16. 16

    如何使用Selenium和Python安装Chrome扩展程序

  17. 17

    使用AWS Amplify通过网站登录到Chrome扩展程序

  18. 18

    用户访问特定网站时,如何自动将网址保存在Google Chrome扩展程序中?

  19. 19

    如何使用Chrome扩展程序关闭当前的Chrome标签?

  20. 20

    使用DevTools的Chrome扩展程序

  21. 21

    从Chrome扩展程序访问网站数据

  22. 22

    如何使用Intellij IDE调试Chrome扩展程序?

  23. 23

    如何使用javascript在chrome扩展程序中创建会话?

  24. 24

    如何在我的网站中使用Chrome扩展功能(NaCl)?

  25. 25

    如何使用Chrome扩展程序/插件访问HTML元素?

  26. 26

    从网站调用Chrome扩展程序中的函数

  27. 27

    如何从Chrome扩展程序中的网站获取完整的HTML源代码

  28. 28

    Chrome扩展程序可在所有网站上使用,并仅对少数几个网站执行不同的操作

  29. 29

    如何使用Chrome扩展程序内容脚本将具有相同域的多个网站进行匹配

热门标签

归档