Chrome扩展-Hello World

Chrome扩展分为扩展和应用,两者界限其实不是很清晰,主要是在于权限方面的差异。

Chrome扩展的启动入口可以在浏览器的工具类和地址栏中,用户单击后激活扩展进行下一步的操作,也可以干脆没有图标,在后台默默的运行。接下来,让我写一个Hello World吧,点击扩展图标后,弹出 Hello World!

首先,建立一个my_first_chrome_extension文件夹,在文件夹中新建一个名为manifest.json的文件,代码如下:

{
    "manifest_version": 2,//固定值2
    "name": "Hello World",
    "version": "1.0",
    "description": "我的第一个Chrome扩展",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png"
    },
    "browser_action": {//工具类功能
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "我的第一个Chrome扩展",
        "default_popup": "popup.html"//点击时弹出的页面,POP, 并非是浏览器打开一个Tab
    }
}

让我简单看下上面代码里的属性。 |属性|含义|备注| |---|---|---| |name|扩展名称|| |version|扩展版本|| |description|扩展说明|| |icons|扩展图标文件资源位置|| |browser_action|指定了扩展的图标放置于工具栏中||

browser_action的属性 |属性|含义|备注| |---|---|---| |default_icon|定义了图标文件的位置|| |default_title|定义了鼠标悬停于图标时的提示文字|| |defualt_popup|定义了点击图标时弹出的页面||

接下来,我们来看下pop.html的内容

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    width: 200px;
    height: 100px;
}

div {
    line-height: 100px;
    font-size: 42px;
    text-align: center;
}
</style>
</head>
<body>
<div id="content_div"></div>
<script src="js/hello_world.js"></script>
</body>
</html>

注意:页面内无法直接写js脚本,需要自行封装并引入。

setInterval(() => {
    var content_div = document.getElementById("content_div");
    content_div.innerHTML = content_div.innerHTML + "<br/>" + "Hello World";

}, 1000);

简单解释下:js的功能为:每隔一秒钟,往div中增加一行Hello World.

至此,文件夹的内容为以下:

接下来,我们将开发的扩展加入到Chrome中。点击顺序如下图所示:

打开扩展程序界面(也可以直接输入chrome://extensions),勾选右上角的开发者模式, 点击 加载已解压的扩展程序,选择扩展所在的文件夹,就可以在浏览器工具类中看到我们的扩展了。

点击扩展图标后,就可以看到我们编写的界面了。

如果出现问题,我们也可以像平时一样打开控制台进行代码调试。

Chrome扩展都包含一个manifest.json的文件,这个文件定义了扩展的相关信息,Chrome读取此文件来解析扩展。它是整个扩展的入口,也是扩展不可缺少的部分。

文件格式可参考官网:https://developer.chrome.com/extensions/manifest JSON属性如下:

{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Pick one (or none)
  "browser_action": {...},
  "page_action": {...},

  // Optional
  "action": ...,
  "author": ...,
  "automation": ...,
  "background": {
    // Recommended
    "persistent": false,
    // Optional
    "service_worker":
  },
  "chrome_settings_overrides": {...},
  "chrome_ui_overrides": {
    "bookmarks_ui": {
      "remove_bookmark_shortcut": true,
      "remove_button": true
    }
  },
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "signature": ...,
  "spellcheck": ...,
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

至此,第一个扩展就结束了。下次将带来使用扩展来操作浏览器内容!

欢迎关注我的公众号: 张恒强的学习笔记