编辑网站文本并保存到浏览器？

Question

我很想知道如何编辑文本等网站数据... 我知道您可以使用 Chrome 中的开发人员工具轻松地做到这一点，但问题是，在您使用该工具对网站进行了更改之后...它会在简单刷新后消失:( 所以我的问题是：如何更改网站并将其 "save" 发送到浏览器，以便每次返回该特定网站时，浏览器都会根据我使用开发人员工具所做的更改代码显示该网站（或类似）。您可以将其保存在本地是的。但是我希望浏览器显示 URL 就好像我确实在那个特定的网站上一样。

非常感谢！真的很感激:)

Answer 1

您可以使用 JavaScript ，每次刷新页面时都会加载它，您可以使用 Google Chrome 的扩展名来实现，然后使用更改内容JS.

记住：所有这些都是网络浏览器的一面，只有您可以看到。

Answer 2

DevTools 有一种方法可以保存或 "persist" 更改，方法是将文件保存到您的工作 space。看这里：https://developers.google.com/web/tools/setup/setup-workflow?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
你可以制作一个Chrome扩展，使用DOM读取内容，然后缓存它，下次打开网站时清除页面并插入缓存HTML。

Answer 3

您可以为此使用 chrome 扩展内容脚本。

使用内容脚本创建您的第一个扩展的简短指南

创建文件夹 My extension，加入其中

创建manifest.json:

{
    "manifest_version": 2,
    "name": "My First Extension",
    "description": "This is my first content-script extension",
    "version": "1.0",
    "content_scripts": [{
        "run_at": "document_end",
        "matches": [
            "https://site_you_want_to_change.com"
        ],
        "js": ["jquery.min.js", "content-script-1.js"]
    }],
    "browser_action": {
    },
    "permissions": [
        "activeTab",
    ]
}

创建 content-script-1.js 在您的开发工具中执行一些脚本，例如：

// with jQuery - change page background style
$("body").css({"background-color":"red"});

// ...or without it - change google country name to 'blablabla'
document.querySelector(".logo-subtext").innerHTML = "blablabla";

// ... or replace all text, found on page from 'Country' to 'blablabla'
allNodes=document.getElementsByTagName("*");
for(node in allNodes){
  if(allNodes[node].innerHTML != undefined)
  {
    allNodes[node].innerHTML=allNodes[node].innerHTML.replace('Country', 'blablabla');
  }
}

将 jquery.min.js 放在您的 manifest.json 附近（您可以从 https://code.jquery.com/jquery-3.1.1.min.js 下载它）
将新的扩展脚本加载到浏览器：设置 -> 扩展 -> [x] 开发者模式 -> 加载解压的扩展 -> Select "My Extension" 文件夹 -> 加载

编辑网站文本并保存到浏览器？

Edit website text and save to browser?

console

google-chrome

edit

save

web

使用内容脚本创建您的第一个扩展的简短指南

阅读更多