京东移动端URL自动跳转PC端URL插件

最新推荐文章于 2024-07-05 12:43:14 发布

清风醉雨

最新推荐文章于 2024-07-05 12:43:14 发布

阅读量6.8k

点赞数 1

分类专栏： web前端技术文章标签： javascript 正则表达式 Chrome插件

本文链接：https://blog.csdn.net/Firewall5788/article/details/120301954

版权

web前端技术专栏收录该内容

8 篇文章

订阅专栏

前言

平常情况下，同学朋友通过手机给自己分享的京东或者淘宝的某一个商品的购物页面，自己在使用电脑打开的时候不会自动跳转到PC版页面，还是会继续显示手机端页面，非常不利于自己的浏览和使用。

因此，我想自己整一个插件，实现网址的自动解析，能够将移动端的网址转换成PC端的网址。

How to do it?

从来没写过插件的我，顿时有点手足无措的样子.

先明确一下需求，我的需求是希望当我在电脑端点开移动端的京东网址时，浏览器自动将页面跳转至PC端网页。

案例分析

SXY发给我的链接

例如上面是我师弟在微信中给我分享的一个手机端的京东购物链接，我用电脑打开后进入的是手机版网页，网址为

https://item.m.jd.com/product/100000400070.html?dl_abtest=o&ShareTm=rr%2BQ7S0ZsHqOg%2BNkD1%2BqDK%2B5MqTbkWUruPQC32bkT2pDewRw1OrdbggDkq8if5MXeRIXogK8djFVmz2e9YNd4zmjpyGFcByC3%2BFfoIcaZ5QYTjBQfgG70%2FDIYcZfjpHmYOpKTTsKRauIKCPmuNwaTnHlSzE9m6NiIE850YMH2u0%3D&ad_od=share&utm_source=androidapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=Wxfriends

通过分析后我发现，我期望的PC网页版网址为

https://item.jd.com/100000400070.html

这就很好办了，我只需要利用正则表达式，从原来的网址中提取出商品的 ID 就可以自己拼接出网址了。

这里提供一个可以快速验证自己正则表达式的网址和一个可以可视化正则表达式的网址

Chrome插件开发

物理学家和工程师的区别

搞工程，讲究的是敏捷式开发，duo通了事。

首先，新建一个manifest.json文件，这个文件是我们即将开发的插件的配置文件，设置该文件格式为UTF-8.

manifest.json

{
    "name": "京东移动URL自动跳转为PC端URL",
    "version": "1.0",
    "manifest_version": 2,
    "description": "在桌面电脑上，打开移动端分享的URL，自动跳转到PC端URL",    
    "content_scripts": [
    	{
    		"matches": ["https://item.m.jd.com/product/*"],
    		"js": ["url_swap.user.js"]
    	}
    ]
}

name: 插件的名字
version: 插件版本
manifest_version: 必须写 2 ，至于原因我没有深究
description: 关于该插件的描述
content_scripts: 列表内嵌套字典
matches: 要匹配的网页，支持正则表达式
js: 需要注入到所匹配的页面中的 JS 文件

js代码

(function() {
	'use strict';
	var result;
	if((result = (new RegExp(/(\d+)\.html/,'i')).exec(location.pathname)) !== null)
	{
		location.href='https://item.jd.com/'+result[1]+'.html';
	}
})();