[chrome扩展开发] URL相关

新打开一个页面的时候，往往需要后去一些信息，比如URL

获取URL

1. 在backgound 可以监听各种事件

chrome.tabs.onUpdated.addListener(function (id, info, tab) {
    if (tab.status === 'loading') {
        console.log(tab,id, info)
    }
});

或

       /*
        * 这里监听完成的网络请求,获取 script 
        */
        chrome.webRequest.onCompleted.addListener(details => {
            /**
             * 过滤无效script
             */
            if ( details.url==undefined || details.url.indexOf('chrome-extension://') == 0 ) {
                return;
            }

            //TODO 业务逻辑
            //console.log(details);
              //this.log(details, 'monitor_script')
            },
            {urls: [""],types:["script"]},
            ["responseHeaders"]
        );

2. 在 content_scripts 直接就获取了

document.location.href

3. 在popup中

chrome.tabs.getSelected(null, function (tab) {
        console.log(tab.url);
    });

解析URL

网上有太多的 正则表达式来解析URL了，实际上有一个URL对象

let  url = new URL(document.location.href);

可以看到，所有内容可以直接使用了。
另外参数被解析成为一个 URLSearchParams对象

URLSearchParams的基本使用如下

let v = new URL('http://www.safecode.cc/index.php?c=b&b=a&a=d#what');

#1. 参数排序，参数按照字母顺序排序

v.searchParams.sort()
//http://www.safecode.cc/index.php?a=d&b=a&c=b#what

#2. 获取所有参数列表

let list = [...v.searchParams.keys()]
//[a,b,c]

#3. 修改参数,如果需要编码，会自动编码

if ( v.searchParams.has('a') ) {
        v.searchParams.set('a','a a');
}
//http://www.safecode.cc/index.php?a=a+a&b=a&c=b#what

#4. 获取k,v值

for(let pair of v.searchParams.entries()){
        console.log(pair[0]+ ', '+ pair[1]); 
    }
//a,a a
//b,a
//c,b

#5. 设置所有参数为空

[...v.searchParams.keys()].map(k=>v.searchParams.set(k,''))
//http://www.safecode.cc/index.php?a=&b=&c=#what

#6. 设置 hash

v.hash = '';
//http://www.safecode.cc/index.php?a=&b=&c=

其他URL相关

decodeURIComponent 用于进行url解码

decodeURLComponent('a%20b');
//a b

URLSearchParams

let v = new URLSearchParams('a=b&c=d');
[...v.keys()]
//["a", "c"]