caiyu/chrome-plugin-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
胡鹏 2019-04-03 10:15:31 +08:00
parent d72db2279e
commit 3ff6a41be8
9 changed files with 589 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
full-chrome-plugin-demo/.idea/full-chrome-plugin-demo.iml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
full-chrome-plugin-demo/.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/full-chrome-plugin-demo.iml" filepath="$PROJECT_DIR$/.idea/full-chrome-plugin-demo.iml" />
</modules>
</component>
</project>

4
full-chrome-plugin-demo/.idea/watcherTasks.xml Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="Babel" />
</project>

460
full-chrome-plugin-demo/.idea/workspace.xml Normal file
View File

@ -0,0 +1,460 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="9bfb492c-2689-4bb0-afe7-fbd098256f22" name="Default" comment="" />
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="TRACKING_ENABLED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileEditorManager">
<leaf>
<file leaf-file-name="content-script.js" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/content-script.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="326">
<caret line="90" column="6" lean-forward="true" selection-start-line="90" selection-start-column="6" selection-end-line="90" selection-end-column="6" />
<folding>
<element signature="n#!!doc" expanded="true" />
<marker date="1554225114034" expanded="true" signature="2218:2558" ph="..." />
<marker date="1554225114034" expanded="true" signature="2585:2594" ph="..." />
</folding>
</state>
</provider>
</entry>
</file>
<file leaf-file-name="sidebar.html" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/sidebar.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="352">
<caret line="22" column="7" lean-forward="true" selection-start-line="22" selection-start-column="7" selection-end-line="22" selection-end-column="7" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="options.js" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/options.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="popup.js" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/popup.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="885">
<caret line="216" column="53" lean-forward="false" selection-start-line="216" selection-start-column="37" selection-end-line="216" selection-end-column="53" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="mypanel.js" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/mypanel.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="353">
<caret line="41" column="13" lean-forward="false" selection-start-line="41" selection-start-column="4" selection-end-line="41" selection-end-column="13" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="devtools.html" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/devtools.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="96">
<caret line="6" column="7" lean-forward="true" selection-start-line="6" selection-start-column="7" selection-end-line="6" selection-end-column="7" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="devtools.js" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/devtools.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="96">
<caret line="6" column="0" lean-forward="true" selection-start-line="6" selection-start-column="0" selection-end-line="6" selection-end-column="0" />
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file leaf-file-name="mypanel.html" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/mypanel.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="448">
<caret line="28" column="27" lean-forward="true" selection-start-line="28" selection-start-column="27" selection-end-line="28" selection-end-column="27" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="icon.png" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/img/icon.png">
<provider selected="true" editor-type-id="images">
<state />
</provider>
</entry>
</file>
<file leaf-file-name="inject.js" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/inject.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="160">
<caret line="10" column="1" lean-forward="true" selection-start-line="10" selection-start-column="1" selection-end-line="10" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>sendMessage</find>
<find>chrome.tabs.sendMessage</find>
<find>chrome.tabs.executeScript</find>
<find>permissions</find>
<find>testBackground</find>
<find>open_background</find>
<find>_window</find>
<find>custom_window_size</find>
<find>getCurrentTabId</find>
<find>你好，我是popup</find>
<find>我是后台，我已收到你的消息</find>
<find>executeScriptToCurrentTab</find>
<find>chrome.runtime.onMessage.addListener</find>
<find>sendMessageToContentScript</find>
<find>my_custom_css</find>
<find>highlight_tab</find>
<find>custom.css</find>
<find>injectCustomJs</find>
<find>myCustomEvent</find>
<find>myCustomEventDiv</find>
<find>initCustomEventListen</find>
<find>my_custom_log</find>
<find>sendMessageToContentScriptByEvent</find>
<find>sendMessageToContentScriptByPostMessage</find>
<find>收到来自content-script的消息</find>
<find>custom</find>
<find>myconsole</find>
<find>sendMessageToBackground</find>
<find>invokeContentScript</find>
<find>postMessage</find>
</findStrings>
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/js/inject.js" />
<option value="$PROJECT_DIR$/js/popup.js" />
<option value="$PROJECT_DIR$/js/background.js" />
<option value="$PROJECT_DIR$/js/content-script.js" />
<option value="$PROJECT_DIR$/js/devtools.js" />
</list>
</option>
</component>
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsFlowSettings">
<service-enabled>true</service-enabled>
<exe-path />
<annotation-enable>false</annotation-enable>
<other-services-enabled>true</other-services-enabled>
<auto-save>true</auto-save>
</component>
<component name="JsGulpfileManager">
<detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting>
</component>
<component name="ProjectFrameBounds">
<option name="x" value="31" />
<option name="y" value="23" />
<option name="width" value="1299" />
<option name="height" value="845" />
</component>
<component name="ProjectView">
<navigator currentView="ProjectPane" proportions="" version="1">
<flattenPackages />
<showMembers />
<showModules />
<showLibraryContents />
<hideEmptyPackages />
<abbreviatePackageNames />
<autoscrollToSource />
<autoscrollFromSource />
<sortByType />
<manualOrder />
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="Scratches" />
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="full-chrome-plugin-demo" type="b2602c69:ProjectViewProjectNode" />
<item name="full-chrome-plugin-demo" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="full-chrome-plugin-demo" type="b2602c69:ProjectViewProjectNode" />
<item name="full-chrome-plugin-demo" type="462c0819:PsiDirectoryNode" />
<item name="css" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="full-chrome-plugin-demo" type="b2602c69:ProjectViewProjectNode" />
<item name="full-chrome-plugin-demo" type="462c0819:PsiDirectoryNode" />
<item name="img" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="full-chrome-plugin-demo" type="b2602c69:ProjectViewProjectNode" />
<item name="full-chrome-plugin-demo" type="462c0819:PsiDirectoryNode" />
<item name="js" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
<property name="settings.editor.selected.configurable" value="preferences.sourceCode.Other File Types" />
<property name="JavaScriptPreferStrict" value="false" />
<property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="HbShouldOpenHtmlAsHb" value="" />
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="ShelveChangesManager" show_recycled="false">
<option name="remove_strategy" value="false" />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="9bfb492c-2689-4bb0-afe7-fbd098256f22" name="Default" comment="" />
<created>1554183153346</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1554183153346</updated>
<workItem from="1554183154498" duration="12154000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="12154000" />
</component>
<component name="ToolWindowManager">
<frame x="31" y="23" width="1299" height="845" extended-state="0" />
<editor active="true" />
<layout>
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24960877" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
</layout>
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="VcsContentAnnotationSettings">
<option name="myLimit" value="2678400000" />
</component>
<component name="XDebuggerManager">
<breakpoint-manager />
<watches-manager />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/js/show-image-content-size.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/jquery-1.8.3.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/manifest.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="447">
<caret line="73" column="44" lean-forward="true" selection-start-line="73" selection-start-column="44" selection-end-line="73" selection-end-column="44" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/popup.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="223">
<caret line="28" column="30" lean-forward="false" selection-start-line="28" selection-start-column="24" selection-end-line="28" selection-end-column="30" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/options.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="352">
<caret line="22" column="10" lean-forward="true" selection-start-line="22" selection-start-column="10" selection-end-line="22" selection-end-column="10" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/newtab.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="304">
<caret line="19" column="15" lean-forward="true" selection-start-line="19" selection-start-column="15" selection-end-line="19" selection-end-column="15" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/background.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="400">
<caret line="25" column="7" lean-forward="true" selection-start-line="25" selection-start-column="7" selection-end-line="25" selection-end-column="7" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/css/custom.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="368">
<caret line="23" column="14" lean-forward="true" selection-start-line="23" selection-start-column="14" selection-end-line="23" selection-end-column="14" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/background.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1536">
<caret line="96" column="1" lean-forward="true" selection-start-line="96" selection-start-column="1" selection-end-line="96" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/options.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/img/icon.png">
<provider selected="true" editor-type-id="images">
<state />
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/devtools.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="96">
<caret line="6" column="7" lean-forward="true" selection-start-line="6" selection-start-column="7" selection-end-line="6" selection-end-column="7" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mypanel.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="448">
<caret line="28" column="27" lean-forward="true" selection-start-line="28" selection-start-column="27" selection-end-line="28" selection-end-column="27" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/devtools.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="96">
<caret line="6" column="0" lean-forward="true" selection-start-line="6" selection-start-column="0" selection-end-line="6" selection-end-column="0" />
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/mypanel.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="353">
<caret line="41" column="13" lean-forward="false" selection-start-line="41" selection-start-column="4" selection-end-line="41" selection-end-column="13" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/inject.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="160">
<caret line="10" column="1" lean-forward="true" selection-start-line="10" selection-start-column="1" selection-end-line="10" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/popup.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="885">
<caret line="216" column="53" lean-forward="false" selection-start-line="216" selection-start-column="37" selection-end-line="216" selection-end-column="53" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/content-script.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="326">
<caret line="90" column="6" lean-forward="true" selection-start-line="90" selection-start-column="6" selection-end-line="90" selection-end-column="6" />
<folding>
<element signature="n#!!doc" expanded="true" />
<marker date="1554225114034" expanded="true" signature="2218:2558" ph="..." />
<marker date="1554225114034" expanded="true" signature="2585:2594" ph="..." />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/sidebar.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="352">
<caret line="22" column="7" lean-forward="true" selection-start-line="22" selection-start-column="7" selection-end-line="22" selection-end-column="7" />
<folding />
</state>
</provider>
</entry>
</component>
</project>

35
full-chrome-plugin-demo/js/background.js
View File

@ -1,3 +1,5 @@
// 后台常驻
//-------------------- 右键菜单演示 ------------------------//
chrome.contextMenus.create({
title: "测试右键菜单",
@ -48,6 +50,23 @@ chrome.contextMenus.create({
});
})();*/
$('#test_cors').click((e) => {
$.get('https://www.baidu.com', function(html){
console.log( html);
alert('跨域调用成功！');
});
});
$('#get_popup_title').click(e => {
var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {
alert(views[0].document.title);
} else {
alert('popup未打开！');
}
});
// 监听来自content-script的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
@ -56,22 +75,6 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request));
});
$('#test_cors').click((e) => {
$.get('https://www.baidu.com', function(html){
console.log( html);
alert('跨域调用成功！');
});
});
$('#get_popup_title').click(e => {
var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {
alert(views[0].document.title);
} else {
alert('popup未打开！');
}
});
// 获取当前选项卡ID
function getCurrentTabId(callback)
{

88
full-chrome-plugin-demo/js/content-script.js
View File

@ -1,4 +1,7 @@
console.log('这是content script!');
// 向H5页面注入JS 或者 css;
// content-scripts和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过injected js来实现
console.log('这是content script!');
// 注意，必须设置了run_at=document_start 此段代码才会生效
document.addEventListener('DOMContentLoaded', function()
@ -56,6 +59,22 @@ document.addEventListener('DOMContentLoaded', function()
}
});
// 向页面注入JS
function injectCustomJs(jsPath)
{
jsPath = jsPath || 'js/inject.js';
var temp = document.createElement('script');
temp.setAttribute('type', 'text/javascript');
// 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
temp.src = chrome.extension.getURL(jsPath);
temp.onload = function()
{
// 放在页面不好看，执行完后移除掉
// this.parentNode.removeChild(this);
};
document.body.appendChild(temp);
}
function initCustomPanel()
{
var panel = document.createElement('div');
@ -63,9 +82,9 @@ function initCustomPanel()
panel.innerHTML = `
<h2>injected-script操作content-script演示区：</h2>
<div class="btn-area">
<a href="javascript:invokeContentScript('sendMessageToBackground()')">发送消息到后台或者popup</a><br>
<a href="javascript:sendMessageToContentScriptByPostMessage('你好，我是普通页面！')">通过postMessage发送消息给content-script</a><br>
<a href="javascript:sendMessageToContentScriptByEvent('你好啊！我是通过DOM事件发送的消息！')">通过DOM事件发送消息给content-script</a><br>
<a href="javascript:invokeContentScript('sendMessageToBackground()')">发送消息到后台或者popup</a><br>
</div>
<div id="my_custom_log">
</div>
@ -73,22 +92,35 @@ function initCustomPanel()
document.body.appendChild(panel);
}
// 向页面注入JS
function injectCustomJs(jsPath)
{
jsPath = jsPath || 'js/inject.js';
var temp = document.createElement('script');
temp.setAttribute('type', 'text/javascript');
// 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
temp.src = chrome.extension.getURL(jsPath);
temp.onload = function()
{
// 放在页面不好看，执行完后移除掉
this.parentNode.removeChild(this);
};
document.body.appendChild(temp);
function initCustomEventListen() {
var hiddenDiv = document.getElementById('myCustomEventDiv');
if(!hiddenDiv) {
hiddenDiv = document.createElement('div');
hiddenDiv.style.display = 'none';
hiddenDiv.id = 'myCustomEventDiv';
document.body.appendChild(hiddenDiv);
}
hiddenDiv.addEventListener('myCustomEvent', function() {
var eventData = document.getElementById('myCustomEventDiv').innerText;
tip('收到自定义事件：' + eventData);
});
}
window.addEventListener("message", function(e)
{
console.log('收到消息：', e.data);
if(e.data && e.data.cmd == 'invoke') {
eval('('+e.data.code+')');
}
else if(e.data && e.data.cmd == 'message') {
tip(e.data.data);
}
}, false);
// 接收来自后台的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
@ -124,32 +156,8 @@ chrome.runtime.onConnect.addListener(function(port) {
}
});
window.addEventListener("message", function(e)
{
console.log('收到消息：', e.data);
if(e.data && e.data.cmd == 'invoke') {
eval('('+e.data.code+')');
}
else if(e.data && e.data.cmd == 'message') {
tip(e.data.data);
}
}, false);
function initCustomEventListen() {
var hiddenDiv = document.getElementById('myCustomEventDiv');
if(!hiddenDiv) {
hiddenDiv = document.createElement('div');
hiddenDiv.style.display = 'none';
hiddenDiv.id = 'myCustomEventDiv';
document.body.appendChild(hiddenDiv);
}
hiddenDiv.addEventListener('myCustomEvent', function() {
var eventData = document.getElementById('myCustomEventDiv').innerText;
tip('收到自定义事件：' + eventData);
});
}
var tipCount = 0;
// 简单的消息通知
function tip(info) {

2
full-chrome-plugin-demo/js/devtools.js
View File

@ -2,7 +2,7 @@
// 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调
chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{
console.log('自定义面板创建成功！'); // 注意这个log一般看不到
console.log('自定义面板创建成功！22222222222222'); // 注意这个log一般看不到
});
// 创建自定义侧边栏

3
full-chrome-plugin-demo/js/inject.js
View File

@ -1,4 +1,7 @@
// 调用页面JS, 访问JS变量
// 通过postMessage调用content-script
function invokeContentScript(code)
{
window.postMessage({cmd: 'invoke', code: code}, '*');

44
full-chrome-plugin-demo/js/popup.js
View File

@ -12,6 +12,8 @@ $(function() {
});
// 打开后台页
$('#open_background').click(e => {
window.open(chrome.extension.getURL('background.html'));
@ -37,7 +39,16 @@ $('#set_background_title').click(e => {
alert('修改成功！');
});
// 自定义窗体大小
/*- - 窗口操作 - - */
// 打开新窗口
$('#open_new_window').click(() => {
chrome.windows.create({state: 'maximized'});
});
// 窗口动画
$('#custom_window_size').click(() => {
chrome.windows.getCurrent({}, (currentWindow) => {
var startLeft = 10;
@ -72,10 +83,7 @@ $('#min_current_window').click(() => {
});
});
// 打开新窗口
$('#open_new_window').click(() => {
chrome.windows.create({state: 'maximized'});
});
// 关闭全部
$('#close_current_window').click(() => {
@ -84,6 +92,11 @@ $('#close_current_window').click(() => {
});
});
/* - - -- 标签操作- -- -- - */
// 新标签打开网页
$('#open_url_new_tab').click(() => {
chrome.tabs.create({url: 'https://www.baidu.com'});
@ -103,11 +116,14 @@ $('#get_current_tab_id').click(() => {
});
});
// 高亮tab
// 切换到第一个标签
$('#highlight_tab').click(() => {
chrome.tabs.highlight({tabs: 0});
});
/* - - -- - -- - - - - - - -- - - - - - - -- - - - - - - - - - */
// popup主动发消息给content-script
$('#send_message_to_content_script').click(() => {
sendMessageToContentScript('你好，我是popup！', (response) => {
@ -123,6 +139,8 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
sendResponse('我是popup，我已收到你的消息：' + JSON.stringify(request));
});
// popup与content-script建立长连接
$('#connect_to_content_script').click(() => {
getCurrentTabId((tabId) => {
@ -138,6 +156,11 @@ $('#connect_to_content_script').click(() => {
});
});
/* - -- - - - - - - -- - - - func- - - -- - - - - - - - - - - - - -- - */
// 获取当前选项卡ID
function getCurrentTabId(callback)
{
@ -171,13 +194,14 @@ function sendMessageToContentScript(message, callback)
});
}
// 向content-script注入JS片段
function executeScriptToCurrentTab(code)
{
getCurrentTabId((tabId) =>
{
chrome.tabs.executeScript(tabId, {code: code});
});
getCurrentTabId((tabId) =>
{
chrome.tabs.executeScript(tabId, {code: code});
});
}