油猴脚本（1）——解决读写在线表格的跨域问题
创作者俱乐部成员
"剪报"这个东西，很多00后小伙伴可能都没见过，就是把报纸上自己感兴趣的内容，用剪刀剪下来，整理粘贴到笔记本里。
其实，我们每天浏览的网页，就相当于买的报纸，当html到达你的浏览器时，你可以随意编辑、修改、裁剪你的网页，让它按你的意思展示数据，自动收发信息，过滤不想要的内容，而这里用到的工具，就是油猴脚本。
主流的浏览器，都可以在插件里安装Tampermonkey（篡改猴）
然后，可以下载一些流行到脚本来用，比如整理知乎、csdn页面，过滤微博、百度广告，小说自动翻页等等，今天先不讨论这些。
昨天，论坛里有朋友问，开发chrome插件时，需要从别的网站，发送请求到WPS在线表格的接口，但遇到跨域问题，需要在背景脚本里转发请求，才能绕过浏览器跨域限制
跨域，是指从浏览器打开某个网页，比如www.baidu.com，之后你使用fetch方法，就只能请求baidu.com提供的接口，而不能向WPS在线表格发送请求
之前，我的办法一直是，在本地开个允许跨域的cgi接口，转发这个请求
但是，昨天的朋友找到文章，说chrome插件可以跨域，我们先不去了解具体实现
既然油猴脚本也是插件，那作为专门用来改网页的工具，它一定也提供了跨域请求的办法
于是，看文档，终于发现过去忽略的重要信息：
油猴脚本，提供了一系列GM_开头的方法，对应一系列权限
简单说就是GM_xmlhttpRequest相比xmlhttpRequest，前者支持跨域（过去看的时候不求甚解，还想着，js本就可以发请求，干嘛还提供这么多GM_开头的方法。。。我还是太天真了）
| 👋 | // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 2024-06-29 // @description try to take over the world! // @author You // @match https://bbs.wps.cn/ // @icon https://www.google.com/s2/favicons?sz=64&domain=wps.cn // @grant GM_xmlhttpRequest // @connect www.kdocs.cn // ==/UserScript== (function() { 'use strict'; var observer = new MutationObserver(function(mutationsList) { for (let mutation of mutationsList) { if (mutation.target.classList.contains('main-content')) { let a = [] document.querySelectorAll(".topic-item").forEach(i=>{ a.push(i.querySelector(".userinfo-out").innerText) }) GM_xmlhttpRequest({ method: "POST", url: "https://www.kdocs.cn/api/v3/ide/file/xxx/script/yyy/sync_task", headers: { "Content-Type": "application/json", "AirScript-Token": "zzz" }, data: JSON.stringify({ Context: { argv: {a} } }), anonymous: true, onload: function(response) { console.log(response.status, response.responseText); } }); observer.disconnect(); break } }; }); observer.observe(document.body, { childList: true, subtree: true }); })(); |
有几个要点需要注意：
@grant添加GM_xhr权限，@connect添加目标域名
MutationObserver等待页面加载再执行代码
xxx/yyy/zzz是你的在线文档脚本令牌
关键是要用anonymous: true参数，去掉请求里的cookie，否则在线文档接口拒绝访问
上面脚本的意思是，刷新wps论坛首页，自动将首页帖子作者发到在线表格，中间不需要本地开接口转发跨域请求，直接用油猴脚本提供的跨域请求方法
创作者俱乐部成员
创作者俱乐部成员