@forestsheep 2019-11-25T10:49:37.000000Z 字数 4543 阅读 189

Chrome扩展开发的简介与实战(3)

学习

优秀扩展介绍

save to pocket 商店地址

tips

多看google官方的sample

学习开发扩展，除了查阅Api之外，还有一个很重要的方法就是研究官方提供的sample。

有时候为了实现一个功能费了半天劲，查了各种网上的问题。最后解决是解决了，但是后来发现在sample中早就有很好的方案了。如果前期就浏览过一遍sample的话，很多问题都可以迎刃而解。

官方sample虽然都是些很简单功能的演示，但是其中却有着能体现从设计者初衷的逻辑在内。如果了解了这些逻辑，后期会少走很多弯路。

content script

上一讲，我们的实战中，改变了网页的一些元素。我们用的方法是先在background里注册了icon button按下去的事件，然后在触发里面写如何改变页面的元素。

chrome.pageAction.onClicked.addListener(function(tab) { // 点击icon执行
    chrome.tabs.executeScript({
        code: 'document.body.style.backgroundColor="gray";document.getElementsByClassName("gaia-header-header")[0].style.backgroundColor="gray";'
    }); // 这里也可以是file来指定js,css文件
})

这里我们其实已经用到了content script，只是用到了它的一种方式：程序式

今天要介绍的是另外一种方式: 申明式
详见谷歌官方文档

{
 "name": "My extension",
 ...
 "content_scripts": [
   {
     "matches": ["http://*.nytimes.com/*"],
     "css": ["myStyles.css"],
     "js": ["contentScript.js"]
   }
 ]
}

其实从底层逻辑上说，这两者没什么差别，即使有差别也是写法上的。随着后面的学习这一点会渐渐显露出来，现在不必理会。

特性

content script的工作原理是在页面加载完后，对页面上的DOM进行加工。有一点比较特殊，他有自己的作用域。（作用域将在后面章节做详细介绍）它既不属于页面自身所带js所在的域，也不属于扩展的background域。

content script可以使用所有的js自带功能，但是只能使用一部分的chrome提供的api，如果想使用全部的api，就得把消息传给background，在background中实现。这就牵涉到消息传递机制（也在稍后介绍）。

实战 3-1

去除 Announcement

manifest.json

{
    "description": "invisible kintone announcement",
    "manifest_version": 2,
    "name": "sample 3-1 content script",
    "content_scripts": [{
        "matches": [
            "https://*.cybozu.com/k/*",
            "https://*.cybozu.cn/k/*"
        ],
        "js": [
            "inject.js"
        ]
    }],                     
    "version": "1.0"
}

inject.js

window.onload = function () {
    let ann = this.document.getElementsByClassName("ocean-portal-announcement")
    console.log(ann)
    if (ann.length > 0) {
        setTimeout(() => {
            ann[0].style.display = "none"
        }, 1000)
    }
}

获取页面元素的方法

这些内容属于js范畴，不是chrome extension范围的知识。但是由于比较常用，在这里还是做一些介绍。将来也起到一个查阅的作用。
可以不必强行掌握，在运用的同时边查边用，效果更好。

了解DOM

DOM (Document Object Model)

MDN上的解释如下

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

上述解释不理解也没关系，一般只要理解为节点或元素即可。

然后我们需要去操作DOM

javascript原生方法

https://www.w3schools.com/js/js_htmldom.asp

getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()

getElementById()

<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Id</h2>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is " + myElement.innerHTML;
</script>
</body>
</html>

getElementByTagName()

<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Tag Name</h2>
<p>Hello World!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
</script>
</body>
</html>

getElementsByClassName()

<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Class Name</h2>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>

getElementsByName()

<!DOCTYPE html>
<html>
<body>
First Name: <input name="fname" type="text" value="Michael"><br>
First Name: <input name="fname" type="text" value="Doug">
<p>Click the button to get the tag name of the first element in the document that has a name attribute with the value "fname".</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementsByName("fname")[0].tagName;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

querySelectorAll()

<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Query Selector</h2>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>

css selector

教材

选择符

类型	符号
tag	none
id	#
class	.
group	,

运算符

类型	符号
descendant(后裔）	space(空格)
child（儿女隔代无效）	>
adjacent sibling（邻居紧挨）	+
general sibling（邻居同一层）	~

jquery

我们也可以用jquery库提供的方法来选择元素

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>find demo</title>
  <style>
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
<script>
var spans = $( "span" );
$( "p" ).find( spans ).css( "color", "red" );
</script>
</body>
</html>