为Chrome应用程序(postman为例)载入userScript

2016-02-24

此文阅次

Chrome应用程序 `postman`

问题:
Chrome应用程序 postman在我的笔记本分辨率1366*768 下界面右侧内容溢出

解决思路

使用UserScript进行额外的样式调整,收缩左侧栏.
编写脚本 postman.user.js

// ==UserScript==
// @name        postman 1366*768 下界面溢出优化
// @author      liuxiang@wosai
// @description postman 1366*768 下界面溢出优化
// @license     GPL version 3
// @encoding    utf-8
// @date        24/02/2016
// @modified    24/02/2016
// @include     chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop/*
// @include     chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop/requester.html
// @grant       GM_xmlhttpRequest
// @grant       GM_getResourceURL
// @run-at      document-end
// @version     1.0
// ==/UserScript==


// 解决1366*768分辨率下内容溢出. 将其拽回
$("#outer-sidebar").css("width","325px");
$("#main-container").css("margin-left","325px");

结果

经调试发现,userScript不能对应用程序进行监听,执行.

新解决思路

将 UserScript脚本放置本地的应用程序中,编辑入口页面,载入用户脚本 postman.user.js

查找postman本地路径及入口文件
右键属性: chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop/requester.html
可通过搜索找到本地具体位置

将 postman.user.js放置与requester.html同级,再更新 requester.html末尾引入用户脚本postman.user.js

// ==UserScript==
// @name        postman 1366*768 下界面溢出优化
// @author      liuxiang@wosai
// @description postman 1366*768 下界面溢出优化
// @license     GPL version 3
// @encoding    utf-8
// @date        24/02/2016
// @modified    24/02/2016
// @include     chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop/*
// @include     chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop/requester.html
// @grant       GM_xmlhttpRequest
// @grant       GM_getResourceURL
// @run-at      document-end
// @version     1.0
// ==/UserScript==


// 解决1366*768分辨率下内容溢出. 将其拽回
$("#outer-sidebar").css("width","325px");
$("#main-container").css("margin-left","325px");


/*
1. 将文件'postman.user.js'拷贝至 postman 目录下
Chrome post App绝对路径:
C:\Users\Administrator\AppData\Local\360Chrome\Chrome\User Data\Default\Extensions\fhbjgbiflinjbdggehcddcbncdddomop\3.2.14_0


2.载入requester.html末尾
<script type="text/javascript" src="postman.user.js"></script>
*/

效果

问题解决,界面右侧内容溢出已经完全可见

奇淫技巧: 调试应用程序

Chrome窗口化加载的应用程序(如postman),按F12是不能显示Chrome Dev Tools的.

技巧:
访问chrome://inspect/#apps是可以查看到已经打开的应用程序.点击inspect可打开chrome调试器

Chrome应用程序 postman

解决思路

结果

新解决思路

效果

奇淫技巧: 调试应用程序

Chrome应用程序 `postman`