Chrome浏览器插件开发实践：用Content Script实现插件和网页间的交互

在前文Chrome浏览器插件开发实践：用Service Workers实现跨域数据共享中介绍了在开发写了一个chrome浏览器插件，实现将微信公众号文章自动发布到csdn的时候是怎样解决跨域共享数据问题的。本文跟大家分享一下如何实现从公众号文章页获取数据并在csdn博客发布页上使用。 要实现浏览器插件和网页间的交互，就需要用到另一项非常重要的插件技术了，那就是内容脚本(Content Script)。

内容脚本是在浏览器插件中定义的一个js文件，能够通过网址规则匹配植入到特定网页中，实现对网页的dom操作以及和插件通信等功能。 在“微信公众号文章多平台发布助手”这个插件中，一共用到了3个内容脚本，它们在 manifest.json 文件中的定义如下：

  "content_scripts": [
    {
      "matches": ["https://mp.weixin.qq.com/s?__biz=*"],
      "js": ["mp.js"]
    },
    {
      "matches": ["https://mp.csdn.net/mp_blog/creation/editor?from=*"],
      "js": ["sites/csdn-get-data.js"],
      "run_at": "document_end"
    },
    {
      "matches": ["https://mp.csdn.net/mp_blog/creation/editor?from=mp"],
      "js": ["sites/csdn.js"],
      "run_at": "document_end",
      "world": "MAIN"
    }
  ]

其中mp.js用来从公众号文章页获取内容，csdn.js和csdn-get-data.js用来把获取到的内容插入到csdn的博客发布表单中，并实现发布。

大家可能会好奇为什么获取内容的时候用了一个脚本，而发布内容的时候用了两个脚本呢。这和csdn的博客发布表单实现有关，它的发布表单中的内容输入框用的是一个富文本编辑器，要通过调用编辑器实例的方式才能实现赋值。 而内容脚本的默认运行方式是隔离运行，在这种方式下只能操作网页dom，不能获取到网页上定义的js变量。内容脚本还有一种运行方式，那就是MAIN方式，这种方式下能获取到网页上定义的js变量，但是没法调用sendMessage方法和插件通信。

要实现两者兼得，就只能定义两种不同运行方式的脚本来实现了，一个通过和插件通信来获取到公众号文章数据并保存到网页dom中；另一个从dom中取数据，并调用富文本编辑器实例来给表单内容赋值。 mp.js的源码如下：

chrome.runtime.sendMessage({
    name: 'setData',
    data: {
        title: document.querySelector("#activity-name").innerText,
        content: document.querySelector("#js_content").innerHTML
    }
})

实现的功能主要是通过dom操作取到公众号文章标题和内容，并通过发送消息的方式把数据传给浏览器插件的service-worker做暂存。

在下一篇中，详细给大家介绍一下csdn.js和csdn-get-data.js的内容，分享一下在实现csdn博客发布页表单赋值的时候遇到的各种问题，以及是如何解决的。

欢迎关注微信公众号：文本魔术，了解更多。